vuex在vue项目中几个属性如何使用的呢？几个属性之间如何关联的？有没有有demo详解的啊？
import Vue from 'vue'
import Vuex from 'vuex'
import { nanoid } from 'nanoid'
Vue.use(Vuex)
// 用来存储数据
const state = {
person: [
{ id: nanoid(), personName: "张三", age: 18 },
{ id: nanoid(), personName: "张4", age: 28 },
{ id: nanoid(), personName: "张5", age: 38 },
]
}
// 响应组件中的事件
const actions = {
//添加人员
addPerson(content, value) {
console.log(value)
const person = {
id: nanoid(),
personName: value,
age: 18//暂时写死
}
content.commit("addPerson", person)
}
}
// 操作数据
const mutations = {
addPerson(_, value) {
this.state.person.unshift(value)
},
deletePerson(_, id) {
const newArr = this.state.person.filter(p => {
return p.id != id
})
this.state.person = newArr
}
}
// 用来将state数据进行加工：类似于computed
const getters = {
getAllPersonAge(state) {
var sumAge = 0;
state.person.forEach(element => {
sumAge += element.age
});
return sumAge
}
}
// 新建并暴露store
export default new Vuex.Store({
state,
actions,
mutations,
getters
})