vue中vuex的使用

1、vuex

vuex是vue.js的状态管理模式，这为vue的组件间通信带来了极大的便利，主要应用场景有：单页应用中，组件之间的状态。音乐播放、登录状态、加入购物车……

2、主要内容

• state，驱动应用的数据源；
• view，以声明方式将 state 映射到视图；
• actions，响应在 view 上的用户输入导致的状态变化。
  下面是官方给出的单项数据流的概念图

3、 vuex的工作流程

下面让我们梳理一下以上流程
Devtools如果不知道怎么使用可以去看我这条博客如何在浏览器中使用Devtools

3.1 state定义

在state中定义一下需要进行管理的状态，然后再state中定义一下，一般我习惯定义null，因为不知道数据类型会是怎样

const state = {
  fileTypeList: null
}

在vue中获取state中定义的状态（仅取）

this.store.state.fileTypeList

3.2 Getter

getter可以理解为store的计算属性，返回state里面的一个值

getFiletypeList:(state) => {
   return state.fileTypeList
},

在页面中取getter中的数据的时候

this.store.getters.getFiletypeList

3.3 mutations

更改store中的state的唯一方法——提交mutations，每个mutation都是一个用来改变state的函数，并且都有一个字符串的事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，但是不能直接调用一个handler，所以mutation更像是时间注册

setFileTypeList (state, data){
  state.fileTypeList = data
}

要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法,我一般放在action中调用

this.store.cimmit('setFileTypeList',data)

4. action

• Action 提交的是 mutation，由mutation去更改state，不是直接变更状态。
• Action 可以包含异步操作。
• 参数是一个与 store 实例具有相同方法和属性的 context 对象，所以可以通过context.state来获取store中的状态，可以通过context.commit来提交更改等
• action的调用使用 this.store.dispatch

fileTypeList(context){
  axios.post(services.reportProofreading.selectFileType).then(res => {
    if (res.data.data) {
      const data = res.data.data
      context.commit('setFileTypeList',data)
    }
  })
}

5、 module 模块化

每个模块中都有state、mutation、action、getter

6、 总结

根据我个人理解，总结vuex的执行过程出如下

6.1 首先在state中定义lista

6.2 在页面的mounted中，dispatch一下action中的函数getLista

6.3 action中的getLista进行commit操作，操作mutation中的setLista,并把异步获取到的数据传过去

6.4 在mutation中修改state中的lista

6.5 每次state中的lista改变，都会触发getter中的函数——watchLista

6.6 在页面的created函数中使用this.store.getters.watchLista来渲染数据

欢迎大家留言纠正