vuex以及多模块mapMutations使用

关于vuex

vuex 是适用于vue框架的状态管理工具，适用于组件与组件之间传值。

vue安装

npm安装命令：

`npm i vuex -s`

在项目的根目录下新增一个store文件夹，在该文件夹内创建index.js。
此时你的项目的src文件夹应当是这样的：

└─store
└─ index.js

我一般目录这样创建：

image

vuex 的五个核心属性

成员列表：

1. state：vuex的基本数据，用来存储变量
2. getters：从基本数据(state)派生的数据，相当于state的计算属性
3. mutations：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
   回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. actions：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

---

dispatch：操作行为触发方法，是唯一能执行action的方法。

vuex 的工作流程

image

基本写法

store/index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import menu from './modules/menu'
import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  getters: {},
  actions: {},
  modules: {
    menu,
    user
  }
})

需要注意的是，这里通过给每个module 对象添加namespaced: true, 来达到命名空间来区分Module的效果。也是通过它来区分更新/调用 对应的vuex 方法来隔离未知数据更新等数据相关问题。

在此记录一下是否使用namespaced：true两者的不同

属性：namespaced

 namespaced: true,

一，不使用namespaced

menu模块

const menu = {
  // namespaced: true,
  state: {
    menuList: [],
  },
  getters: {
  },
  mutations: {
    SET_MENU(state, { list }) {
      state.menuList = list
    }
  },
  actions: {},
}
export default menu

在js文件中使用

methods: {
  ...mapMutations(['SET_MENU']),
  loginSuccess() {
    this.SET_MENU({ list: result.menus })
    
   // 上下两种方法等价
   // this.$store.commit('SET_MENU', result.menus)
  }
}

二，使用namespaced区分模块

menu模块

export default {
  namespaced: true,
  state: {
    menuList: [],
  },
  getters: {
  },
  mutations: {
    SET_MENU(state, { list }) {
      state.menuList = list
    }
  },
  actions: {
  },
}

在js文件中使用

methods: {
  ...mapMutations('menu', ['SET_MENU']),
   loginSuccess() {
    this.SET_MENU({ list: result.menus })

   // 上下两种方法等价
   // this.$store.commit('menu/SET_MENU', result.menus)
  }
}