vuex 攻略 |

一、快速入门

1.1 简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 可以理解为 Vue 的一个小型数据库，亦或是一种缓存机制。当有多个组件需要共享状态/数据时，建议使用 vuex 来管理，以一种全局单例模式，代码将变得更结构化且易维护。其生命周期会随着页面的刷新而重置。

images

1.2 初始化

// 引入相关模块
import Vue from 'vue'
import Vuex from 'vuex'

// 手动启用Vue插件，在使用了模块化之后, window 下没有 Vue 全局变量，插件就无法自调 use 了，只有 Vue 插件才需要启用
Vue.use(Vuex)

// 配置
const store = new Vuex.Store({
    state: {},
    action: {},
    mutations: {},
    getters: {}
})
export default store;

注册到全局 Vue 里面

import Vue from 'vue'
import store from './vuex'
new Vue({
  store
})

二、状态

2.1、state

类似于 data，就是用来存放数据用的，如果组件数据中引用了 state 的数据，那么会自动做一个双向数据绑定。

在组件中获取 state 的数据

1	this.$store.state.stateName

官方建议不直接修改 state 的数据，而是通过调用 mutations 去进行修改。

2.2、getters

类似于 computed ，用来计算数值的，方法名相当于数值，方法名数值一但有变化，就会触发该 getters 方法，并且 getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

组件调用 getters

1	this.$store.getters.doneTodos

2.3、mutations

类似于 methods ，方法

在组件中触发

1	this.$store.commit('mutationName')

修改 state 的数据

mutations: {
    increment (state) {
      state.count++
    }
}

也可以向 store.commit 传入额外的参数，数值或对象

mutations: {
  increment (state, n) {
    state.count += n
  }
}
this.$store.commit('increment', 10)

对象风格的提交方式

store.commit({
  type: 'increment',
  amount: 10
})
mutations: {
  increment (state, payload) {
    state.count += payload.amount
  }
}

如果需要在对象上添加新属性时，应该使用

1	Vue.set(obj, 'newProp', 123)

mutation 必须是同步函数，因为 debug 时 devtool 必须记录 mutaion 前一状态和后一状态的快照，而 devtool 不能知道什么时候回调函数会被调用。

2.4、action

跟 mutationis 是类似的，不同在于

Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

也可以使用参数解构来简化代码

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

在组件中，Action 通过 store.dispatch 方法触发

1	this.$store.dispatch('increment`)

dispatch和commit

一个异步操作与同步操作的区别。

当操作行为中含有异步操作，比如向后台发送请求获取数据，就需要使用action的dispatch去完成。
其它使用commit即可。

三、监听

3.1、使用深度监听 vuex 的 state 对象数据

vuex

state: {
  data: {
    ...
  }
}

组件

computed: {
  listenVuexDate() {
    return this.$store.state.data;
  }
},
watch: {
  listenVuexDate: {
    handler() {
      this.chartsInit();
    },
      // 不是对象类型的话不用启用
      deep: true
  }
}