vuex模块化的写法及用法：state、getteer、mutations、actions

---

一、main.js：挂载

import store from './store/index';
Vue.prototype.$store = store;

二、index.js：导出 store

import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app";

Vue.use(Vuex);
const store = new Vuex.Store({
  modules: {
    app,
  },
});
export default store;

三、app.js：导出app模块

/**
 * @example
 * 1、state
 * this.$store.state.app.user.name
 *
 * 2、mutations
 * this.$store.commit("app/setUser", { name: "熊熊", age: 12, sex: "男" });
 *
 * 3、actions
 * (1) 以载荷形式访问
 * this.$store.dispatch("app/updateUser",{ name: "嘻嘻", age: 11, sex: "女" });
 * (2) 以对象形式访问
 * this.$store.dispatch({
 *  type: "app/updateUser",
 *   user: { name: "憨憨", age: 11, sex: "女" },
 * });
 *
 * 4、getters
 * (1) 不带参数
 * this.$store.getters["app/getAll"]
 * (2) 带参数
 * this.$store.getters["app/getByIndex"](0);
 */
const app = {
  state: {
    user: {
      name: "小明",
      age: "20",
      sex: "男",
    },
  },
  mutations: {
    setUser(state, user) {
      state.user = user;
    },
  },
  actions: {
    updateUser(context, obj) {
      // 以载荷形式
      context.commit("setUser", obj);
      // 以对象形式
      // context.commit("setUser", obj.user);
    },
  },
  getters: {
    // 通过属性访问
    getName(state) {
      return "名字：" + state.user.name;
    },
    getAge(state) {
      return "年龄：" + state.user.age;
    },
    getsex(state) {
      return "性别" + state.user.sex;
    },
    getAll(state) {
      const { name, age, sex } = state.user;
      return "名字：" + name + "\n" + "年龄：" + age + "\n" + "性别" + sex;
    },
    // 通过方法访问
    getByIndex: (state) => (index) => {
      const { name, age, sex } = state.user;
      switch (parseInt(index)) {
        case 0:
          return "名字：" + name;
        case 1:
          return "年龄：" + age;
        case 2:
          return "性别" + sex;
        case 3:
          return "名字：" + name + "\n" + "年龄：" + age + "\n" + "性别" + sex;
        default:
          return "";
      }
    },
  },
  //使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
  namespaced: true,
};

export default app;

四、结构

五、具体使用

1、state

(1) 方式一

// this.$store.state.模块名称.模块属性
this.$store.state.app.user.name

(2) 方式二：辅助函数mapState

// 引用user：this.user
import { mapState } from 'vuex'
computed: {
    ...mapState({
      user: (state) => state.模块名称.模块属性
    }),
  },

2、getters

(1)方式一

/*不带参数
* this.$store.getters['模块名/xxx']
* 带参数
* this.$store.getters['模块名/xxx']()
*/ 
this.$store.getters["app/getAll"]
this.$store.getters["app/getByIndex"](3)

(2)方式二：辅助函数mapGetters

// 引用userName：this.userName
import { mapGetters} from "vuex";
computed: {
	...mapGetters({
      userName: "模块名/xxx",
    }),
},

3、mutations

(1) 方式一

/*
* 1、mutation的事件类型：每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。
* 在这个代码中，setUser就是mutation的一个事件类型。
* 2、载荷(payload)：指通过store.commit传入的额外参数。大多数情况下，载荷是一个对象
*
* this.$store.commit("模块名/mutations事件类型", 载荷)
*/ 
this.$store.commit("app/setUser", { name: "熊熊", age: 12, sex: "男" })

(2)方式二：辅助函数mapMutations

import {  mapMutations } from "vuex";
methods: {
  ...mapMutations({
    setUser: "模块名/mutations事件类型",
  }),
  example() {
    this.setUser({ name: "熊熊", age: 12, sex: "男" });
  },
},

4、actions

(1) 方式一

/*
* 1、以载荷形式分发
* this.$store.dispatch('模块名/方法',传参)
* 
* 2、以对象形式分发
* this.$store.dispatch({
* 	type:'模块名/方法',
* 	传参
* })
*/ 
this.$store.dispatch("app/updateUser",{ name: "嘻嘻", age: 11, sex: "女" });
this.$store.dispatch({
     type: "app/updateUser",
     user: { name: "憨憨", age: 11, sex: "女" },
});

(2) 方式二：辅助函数mapActions

import { mapActions } from "vuex";
methods: {
   ...mapActions({ updateUser: "模块名/方法" }),
   example() {
     this.updateUser({ name: "熊熊", age: 12, sex: "男" });
   },
 },