-
在 Vuex 中,提供了一组辅助函数,这些辅助函数可以简化我们的写法,随着业务功能逐渐增加,会出现很多个状态。当一个组件需要多个状态的时候,将这些状态都声明为计算属性会有些重复和冗余。所以辅助函数应运而生。
-
store 仓库
import Vue from "vue"; import Vuex from "vuex"; // 注册 Vue.use(Vuex); export default new Vuex.Store({ // 用于状态管理,只存储数据 state: {}, // 用于获取数据并做二次处理,类似于计算属性,获取数据 getters: {}, // 修改仓库的状态 mutations: {}, // 管理异步操作 actions: {}, });
-
4 个辅助函数的用途
- mapState
-
获取数据 触发 store 里的 state 获取数据,但是 state 用于状态管理,职能存储数据,数据的获取最好不要通过 state 直接获取。
// state用于状态管理,职能存储数据,不要直接在 state 中获取数据 state: { goodsData: [ { _id: 0, name: "皇帝柑10斤橘子新鲜当季水果大果贡柑橘应季蜜橘蜜桔包邮桔子", price: "35", image: "goods01.jpg", }, { _id: 1, name: "【大果】丹东99草莓红颜新鲜奶油牛奶东港大草莓新鲜水果包邮", price: "78", image: "goods02.jpg", }, ], addgoodsData: [], },
- mapGetters
-
会触发 store 里的 getters 方法,getters 用于获取数据并做二次处理,类似于计算属性,会返回数据,数据的获取最好通过 getter
getters: { getGoodsData(state) { return state.goodsData; }, addGoodsData(state) { return state.addgoodsData; }, },
-
mapMutations
-
会触发 store 仓库中的 mutations 方法 , mutations 用于修改仓库的状态
mutations: { // 增加 addMutation(state, payload) { let result = state.addgoodsData.find((item) => { return item._id == payload._id; }); if (!result) { state.addgoodsData.push(payload); } else { result.count++; console.log("重复"); } }, // 删除 deleteGoodsDataMutation(state, payload) { state.addgoodsData.splice( state.addgoodsData.findIndex((item) => payload == item._id), 1 ); }, addCountMutation(state, payload) { state.addgoodsData.map((item) => { if (payload == item._id) { item.count++; } }); }, // 减 minusCountMutation(state, payload) { state.addgoodsData.map((item) => { if (payload == item._id) { if (item.count > 0) { item.count--; } else { state.addgoodsData.splice( state.addgoodsData.findIndex((item) => payload == item._id), 1 ); } } }); }, },
-
-
mapActions
-
会触发 store 仓库中的 actions 方法,管理异步请求,例如发送 ajax 请求获取数据
// 管理异步操作 actions: { getStudentsAction(context) { service.get("users").then(({ data }) => { context.commit("getStudentsMutation", data); }); }, },
-
4 个辅助函数的使用
- mapState
-
使用之前,需要从 vuex 中引入辅助函数
import { mapState } from "vuex";
-
没有使用辅助函数时,我们需要声明多个计算属性,会显得非常重复和冗余。
export default { computed: { 【第一个计算属性】 stu1() { return this.$store.state.stu1; }, 【第二个计算属性】 stu2() { return this.$store.state.stu2; } 。。。 【第 n 个计算属性】 stuN(){ return this.$store.state.stuN; } } };
-
使用辅助函数,直接从 Vuex 中结构,一行代码即可获得所有的状态
-
import { mapState } from "vuex"; export default { computed: { ...mapState(["stu1", "stu2", ... , "stun"]) };
-
- mapGetters 获取修改后的数据
-
使用之前,需要从 vuex 中引入辅助函数
import { mapGetters } from "vuex";
-
在计算属性 computed 使用
computed: { ...mapGetters(["getGoodsData"]), },
-
mapMutations
-
使用之前,需要从 vuex 中引入辅助函数
import { mapMutations } from "vuex";
-
在计算属性中使用
methods: { ...mapMutations(["deleteGoodsDataMutation","addCountMutation","minusCountMutation"]), },
-
-
mapActions
-
使用之前,需要从 vuex 中引入辅助函数
import { mapActions } from "vuex";
-
在计算属性中使用
methods: { ...mapActions(["getStudentsAction"]) },
Vuex 的辅助函数
最新推荐文章于 2023-09-02 15:40:41 发布