一：概念： vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。 二：vuex五大组成部分
1、state: vuex的基本数据，用来存储变量;(数据存储)
2、getters:从基本数据（(state）派生的数据，相当于state的计算属性;
3、 mutations:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个mution都有一个字符串的事件类型(type）和一个回调函数（handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state作为第一个参数,提交载荷作为第二个参数。（更改 state 中状态的逻辑同步操作)
commit-提交
4、action:和 mutations 的功能大致相同
①action提交的是mution.而不是直接变更状态，
②action可以包含任意异步操作。（提交mutation异步操作)
dispatch-调度
5、 modules:模块化vuex,可以让每一个模块拥有自己的state、 mutation、 action、getters,使得结构非常清晰，方便管理。（模块化)
1.现在store文件夹中定义好vuex模块js文件，并导出内容
注意：导出时设置 namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
2.在index.js文件中的先引入vuex模块
3.在index.js文件中的modules：{ }使用
4.最后进入到vue文件中使用，在methods中定义方法调用
Vue.use(Vuex) //school模块部分
const school = { namespaced: true, state: { val: 1, num: 0, }, getters: { bignum(state) { return state.num * 10 } }, mutations: { add() { console.log("add"); this.state.schoolAbout.num += this.state.schoolAbout.val; }, pop() { console.log("pop"); this.state.schoolAbout.num -= this.state.schoolAbout.val; }, odd() { console.log("odd"); if (this.state.schoolAbout.num % 2) { this.state.schoolAbout.num += this.state.schoolAbout.val; } }, eve() { console.log("eve"); if (!(this.state.schoolAbout.num % 2)) { this.state.schoolAbout.num += this.state.schoolAbout.val; } },
}, actions: {
}, } //人员模块的部分
const preson = { namespaced: true, state: { lists: [ { id: 1, name: "张三" }, { id: 2, name: "王五" }, { id: 3, name: "李四" }, ], }, getters: {
}, mutations: { addpreson() { console.log(this); console.log("addpreson"); var newpreson = { id: 4, name: "李白" } this.state.presonAbout.lists.push(newpreson) } }, actions: {
}, }
export default new Vuex.Store({ modules: { schoolAbout: school, presonAbout: preson } })
// 小结：vuex模块化使用注意事项：（在store/index.js中） // 1.开启命名空间 namespaced: true -- 方便在组建中使用 // 2.为每个模块命名，注意$store中state结构发生变化，原来所有的数据放在一起，现在不同模块的的数据分开放 // 3.由于数据结构的变化，所以在getters,mutations,actions使用数据时要加上模块名称 ==============================以下实在具体的组件中使用vuex中的数据========================== ======school组件======== <template> <div class="school"> <h2>运结果为:{{ num }}---在乘以10后:{{ bignum }}</h2> <select name="number" id="selt" v-model.number="val"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <button @click="add">+</button> <button @click="pop">-</button> <button @click="odd">奇数时加</button> <button @click="eve">偶数时加</button> <h4 style="color: #f33">人员列表总人数：{{ lists.length }}</h4> </div> </template>
<script> import { mapState, mapGetters, mapMutations } from "vuex"; //映射方法 export default { data() { return {}; }, computed: { //========= vuex中四个映射方法的使用，进行简便操作 ======== // 1.mapState方法:用于帮助我们映射state中的数据为计算属性 // 来使用mapstate的好处就是，无需在{{}}中写的过于复杂 $store.state.num // 注意点：对象中使用...将对象进行展开 ...mapState("schoolAbout", ["val", "num"]), ...mapState("presonAbout", ["lists"]),
// 2.mapGetters方法:用于帮助我们映射getters中的数据为计算属性 ...mapGetters("schoolAbout", ["bignum"]), //mapGetters的数组写法 }, methods: { //#region // 程序员人为的写法，自已调用$store.commit()方法 // add() { // this.$store.commit("add"); // }, // pop() { // this.$store.commit("pop"); // }, // odd() { // this.$store.commit("odd"); // }, // eve() { // this.$store.commit("eve"); // }, //#endregion
// 3.mapActions方法:用于帮助我们生成与actions对话的方法，即:包含$store.dispatch(xxx)的函数 ...mapMutations("schoolAbout", ["add", "pop", "odd", "eve"]),
// 4.mapMutations方法:用于帮助我们生成与mutations对话的方法，即:包含|$store.commit(xxx)的函数 // =====小结四种map方法：1，2写在计算属性中，3，4写在方法中，都需要使用...进行展开 // 他们都有两种写法，对象形式和数组形式，如果是采用模块化写法，要加上具体对应名称。 }, }; </script>
<style scoped> button { margin: 0px 5px; } </style> ==========preson组件========= <template> <div class="box"> <h3 style="color: #f33">数字求和结果：{{ num }}</h3> <button @click="addpreson">添加工作人员</button> <h4 v-for="(item, id) in lists" :key="id">{{ item.name }}</h4> </div> </template>
<script> import { mapState, mapMutations } from "vuex"; //映射方法 export default { data() { return {}; }, computed: { ...mapState("schoolAbout", ["val", "num"]), ...mapState("presonAbout", ["lists"]), }, methods: { ...mapMutations("presonAbout", ["addpreson"]), }, }; </script>
<style scoped> h4 { color: rgb(241, 191, 124); } </style> 标签：schoolAbout,...,模块化,数据仓库,state,num,vuex,store From： https://www.cnblogs.com/wyl-1113/p/16981740.html