vuex在vue项目中几个属性如何使用的呢？几个属性之间如何关联的？有没有有demo详解的啊？

Question

vuex在vue项目中几个属性如何使用的呢？几个属性之间如何关联的？有没有有demo详解的啊？

Answer 1

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
})