【原创纯手打】如何使用Vue写微信朋友圈中的留言回复功能(附源码)

简单的留言板懂的都懂，问题是如何添加留言功能

当我们添加写的内容存储到数组，然后将其遍历出来，在外部渲染时，再次遍历item.children，然后对其添加新的页面渲染

绑定回复键，在store.js中写下

        hf(state, obj) {
            //判断是否有children属性，如果有直接追加，如果没有就添加children数组
            if (state.list[obj.index].hasOwnProperty('children')) {
                state.list[obj.index]['children'].push(obj);
            } else {
                state.list[obj.index]['children'] = [];
                state.list[obj.index]['children'].push(obj);
            }
        },

hasOwnProperty表示是否有自己的属性。这个方法会查找一个对象是否有某个属性，如果是，返回true，否者false，但是不会去查找它的原型链

hasOwnProperty() 方法是 Object 的原型方法（也称实例方法），它定义在 Object.prototype 对象之上，所有 Object 的实例对象都会继承 hasOwnProperty() 方法

在页面上回复需要传递下标或者时间，都彳亍

    repy(index) {
      let obj = {
        username: this.user.username,
        title: this.title,
        time: new Date().toLocaleString(),
        index: index,
      };

      this.hf(obj);
      this.title = "";
    },

传递到store.js执行

建议添加vue-persist本地存储插件配合使用美滋滋，用过都说好

cnpm i vuex-persist --save

然后把store.js中换成

import { createStore } from "vuex";
import VuexPersist from "vuex-persist";
const vuexLocal = new VuexPersist({
    storage:window.localStorage,
})
export default createStore({
    state:{},
    mutations:{},
    getters:{},
    plugins:[vuexLocal.plugin],
})