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