简单的留言板懂的都懂,问题是如何添加留言功能
当我们添加写的内容存储到数组,然后将其遍历出来,在外部渲染时,再次遍历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],
})