关于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,使得结构非常清晰，方便管理。

vuex 的工作流程

image

基本写法

store/index.ts

import Vue from 'vue'
import Vuex from 'vuex'
import moduleA from './modules/moduleA'
import moduleB from './modules/moduleB'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  mutations: {},
  getters: {},
  actions: {},
  modules: {
    ModuleA: moduleA,
    ModuleB: moduleB
  }
})

store/modules/moduleA.ts && store/modules/moduleB.ts

属性：namespaced

 namespaced: true,

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

moduleA.ts

export default {
  namespaced: true,

  state: {
    name: 'moduleA'
  },
  getters: {
    settingNewName(state: { name: string }) {
      return '这是' + state.name
    }
  },
  mutations: {
    editByMutation(state: { name: string }, payload: any) {
      state.name = '这是模块A'
    }
  },
  actions: {
    edithByAction(context: any, payload: any) {
      context.commit('editByMutation', payload)
      // console.log(payload)
    }
  }
}

moduleB.ts

export default {
  namespaced: true,
  state: {
    name: 'moduleB'
  },
  getters: {

  },
  mutations: {
    editMutation(state: any, payload: any) {
      state.name = '姓名：' + payload.name + ',' + '年龄：' + payload.age
    }
  },
  actions: {
    editByAction(context: any, payload: any) {
      return new Promise((resolve, reject)=>{
        setTimeout(()=>{
            context.commit('editMutation', payload)
            resolve()
        },2000)
      })
    }
  }
}

获取store里state 的成员变量

$store.state.ModuleA.name

修改state的成员变量

this.$store.dispatch('ModuleA/edithByAction', {name: 'Rose', age: '99'})

this.$store.dispatch('ModuleB/editByAction', {name: 'Rose', age: '99'})

通过dispatch 修改state值，成功之后，重新获取$store.state.ModuleA.name