Vuex 的辅助函数

• 在 Vuex 中，提供了一组辅助函数，这些辅助函数可以简化我们的写法，随着业务功能逐渐增加，会出现很多个状态。当一个组件需要多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。所以辅助函数应运而生。

• store 仓库

  import Vue from "vue";
  import Vuex from "vuex";
  // 注册
  Vue.use(Vuex);
  export default new Vuex.Store({
    // 用于状态管理,只存储数据
    state: {},
    // 用于获取数据并做二次处理,类似于计算属性，获取数据
    getters: {},
    // 修改仓库的状态
    mutations: {},
    // 管理异步操作
    actions: {},
  });
  

• 4 个辅助函数的用途

  1. 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: [],
      },
    

  2. mapGetters

  • 会触发 store 里的 getters 方法，getters 用于获取数据并做二次处理,类似于计算属性,会返回数据，数据的获取最好通过 getter

    getters: {
        getGoodsData(state) {
          return state.goodsData;
        },
        addGoodsData(state) {
          return state.addgoodsData;
        },
    },
    

  3. 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
                   );
                 }
               }
             });
           },
         },
       

  4. mapActions

  • 会触发 store 仓库中的 actions 方法，管理异步请求，例如发送 ajax 请求获取数据

    // 管理异步操作
      actions: {
        getStudentsAction(context) {
          service.get("users").then(({ data }) => {
            context.commit("getStudentsMutation", data);
          });
        },
      },
    

• 4 个辅助函数的使用

  1. 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"])
      };
      

  2. mapGetters 获取修改后的数据

  • 使用之前，需要从 vuex 中引入辅助函数

    import { mapGetters } from "vuex";
    

  • 在计算属性 computed 使用

     computed: {
        ...mapGetters(["getGoodsData"]),
      },
    

  3. mapMutations

     • 使用之前，需要从 vuex 中引入辅助函数

       import { mapMutations } from "vuex";
       

     • 在计算属性中使用

       methods: {
         ...mapMutations(["deleteGoodsDataMutation","addCountMutation","minusCountMutation"]),
         },
       

  4. mapActions

  • 使用之前，需要从 vuex 中引入辅助函数

    import { mapActions } from "vuex";
    

  • 在计算属性中使用

     methods: {
        ...mapActions(["getStudentsAction"])
      },
    

权限管理