Vuex有几个属性及作用？

State：
存放应用程序的状态（数据），所有组件共享。它是Vue实例的data属性的替代品，但是通过它存储和管理的状态，可以在整个应用程序中实现全局共享，即不同的组件可以通过定义的getter和setter访问同一状态数据。
Getters：
用于获取State中的状态，主要用于对state进行逻辑上的组合和应用 ，类似状态值的计算属性
Mutations：
用于修改state中的数据，是唯一可以修改state的地方。修改State中的状态，只能同步执行。Mutation必须是同步函数，不能处理异步行为，异步行为应该放在Action中处理。
Actions：
用于异步操作和提交mutations，在actions中可以进行任何异步操作，最后再提交到mutations中同步修改state
Modules：
当一个 State 对象比较庞大时，用于将store分割成模块，每个模块都拥有自己的state、mutation、action、getters和子模块
注意：媊vue2对应vuex@3版本 /vue3对应的是vuex@4版本

1、搭建环境：src/store/index.js

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
export default new Vuex.Store({
    //存储数据
    state: {
        sum: 0,
        name:"一 一",
        schoolName:"小二学校"
    },
    //响应组件中的动作
    actions: {
        jiaOdd(context, value) {
            if (context.state.sum % 2) {
                context.commit("JIA", value);
            }
        },
        jiaWait(context, value) {
            setTimeout(() => {
                context.commit("JIA", value)
            })
        }
    },
    //操作数据
    mutations: {
        JIA(state, value) {
            state.sum += value;
        },
        JIAN(state, value) {
            state.sum -= value;
        }
    },
    getters: {
        bigSum(state) {
            return state.sum * 10;
        }
    }
})

2、在main.js中创建vm时传入store 配置项

import App from './App'
import store from "./store"
new Vue({
    el: "#app",
    render: h => h(App),
    store
});

3、getters的使用

当state中的数据需要经过加工后在使用时，可以使用getters加工

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
export default new Vuex.Store({
    //存储数据
    state: {
        sum: 0,
        name:"一 一",
        schoolName:"小二学校"
    },
    getters: {
        bigSum(state) {
            return state.sum * 10;
        }
    }
})

组件中读取数据：$store.getters.bigSum

4、四个map方法的使用

mapState方法：用于帮助我们映射state中的数据为计算属性
computed: {
  ...mapState({name:"name",schoolName:"schoolName",sum:"sum"}),//对象写法
  ...mapState(["name", "schoolName", "sum"]),//数组写法
}

mapGetters方法：用于帮助我们映射getter中的数据为计算属性
computed: {

    ...mapGetters(({bigSum:"bigSum"}),//对象写法
    ...mapGetters(["bigSum"])//数组写法
}

mapActions方法：用于帮助我们生成Actions对话的方法。（此方法也可以有对象和数组两种方式）
methods: {
    ...mapActions({incrementOdd: "jiaOdd", incrementWait: "jiaWait"})
}

mapMutations方法：用于帮助我们生成Mutations对话的方法。（此方法也可以有对象和数组两种方式）
methods: {
    ...mapMutations({increment: "JIA", decrement: "JIAN"}),
}

5、模块化+命名空间
目的：让代码更好维护，让种数据分类更加明确
修改Index.js

//求和相关配置
export default {
    namespaced: true,
    state: {
        sum: 0,
        name: "一 一",
        schoolName: "小二学校"
    },
    actions: {},
    mutations: {},
    getters: {}
}

//人员管理相关配置
export default {
    namespaced: true,
    //存储数据
    state: {},
    //响应组件中的动作
    actions: {},
    //操作数据
    mutations: {},
    getters: {}
}

//修改Index.js
import Vue from "vue"
import Vuex from "vuex"
import personAbout from "./Person"
import countAbout from "./Count"
Vue.use(Vuex);
export default new Vuex.Store({
    modules: {
        countAbout,
        personAbout
    }
})

开启命名空间后，组件中读取state数据
方式一：
this.$store.state.countAbout.name;
方式二：
...mapState("countAbout", ["name", "schoolName", "sum"]),

开启命名空间后，组件中读取getter数据
this.$store.getters["countAbout/bigSum"];
...mapGetters("countAbout", ["bigSum"])

开启命名空间后，组件中读取Actions数据
this.$store.dispatch("countAbout/jiaOdd", value);
...mapActions("countAbout", {incrementOdd: "jiaOdd", incrementWait: "jiaWait"})

开启命名空间后，组件中读取Mutations数据
this.$store.commit("countAbout/JIA",value);
...mapMutations("countAbout", {increment: "JIA", decrement: "JIAN"})