Vuex基本使用的总结

Vuex 背后的基本思想：把组件的共享状态抽取出来，以一个全局单例模式管理，在这种模式下，我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

另外，通过定义和隔离状态管理中的各种概念并强制遵守一定的规则，我们的代码将会变得更结构化且易维护。

特点：

Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用

使用

在 Vue 的单页面应用中使用，需要使用Vue.use(Vuex)调用插件。
使用非常简单，只需要将其注入到Vue根实例中。

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({state: {count: 0},
getter: {doneTodos: (state, getters) => {return state.todos.filter(todo => todo.done)}},mutations: {increment (state, payload) {state.count++}},
actions: {addCount(context) {// 可以包含异步操作// context 是一个与 store 实例具有相同方法和属性的 context 对象}
}
})
// 注入到根实例
new Vue({el: '#app',store,template: '<App/>',components: { App }
})复制代码

然后改变状态：

this.$store.commit('increment')复制代码

Vuex 主要有四部分：

state：包含了store中存储的各个状态。
getter: 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。
mutation: 一组方法，是改变store中状态的执行者。
action: 一组方法，其中可以含有异步操作

state

Vuex 使用 state来存储应用中需要共享的状态。为了能让 Vue 组件在 state更改后也随着更改，需要基于state创建计算属性。

const Counter = {template: `<div>{{ count }}</div>`,computed: {count () {return this.$store.state.count  // count 为某个状态}}
}复制代码

getters

类似于 Vue 中的计算属性，可以在所以来的其他 state或者 getter改变后自动改变。
每个getter方法接受 state和其他getters作为前两个参数

getters: {doneTodos: (state, getters) => {return state.todos.filter(todo => todo.done)}}复制代码

mutations

前面两个都是状态值本身，mutations才是改变状态的执行者。mutations用于同步地更改状态

// ...
mutations: {increment (state, n) {state.count += n}
}复制代码

其中，第一个参数是state，后面的其他参数是发起mutation时传入的参数。

this.$store.commit('increment', 10)复制代码

commit方法的第一个参数是要发起的mutation名称，后面的参数均当做额外数据传入mutation定义的方法中。
规范的发起mutation的方式如下：

store.commit({type: 'increment',amount: 10   //这是额外的参数
})复制代码

额外的参数会封装进一个对象，作为第二个参数传入mutation定义的方法中。

mutations: {increment (state, payload) {state.count += payload.amount}
}复制代码

actions

想要异步地更改状态,需要使用action。action并不直接改变state，而是发起mutation。

actions: {incrementAsync ({ commit }) {setTimeout(() => {commit('increment')}, 1000)}
}复制代码

发起action的方法形式和发起mutation一样，只是换了个名字dispatch。

// 以对象形式分发
store.dispatch({type: 'incrementAsync',amount: 10
})复制代码

action处理异步的正确使用方式

想要使用action处理异步工作很简单，只需要将异步操作放到action中执行（如上面代码中的setTimeout）。
要想在异步操作完成后继续进行相应的流程操作，有两种方式:

action返回一个 promise。
而dispatch方法的本质也就是返回相应的action的执行结果。所以dispatch也返回一个promise。

store.dispatch('actionA').then(() => {
// ...
})
复制代码

利用async/await。代码更加简洁。

// 假设 getData() 和 getOtherData() 返回的是 Promiseactions: {async actionA ({ commit }) {commit('gotData', await getData())},async actionB ({ dispatch, commit }) {await dispatch('actionA') // 等待 actionA 完成commit('gotOtherData', await getOtherData())}
}复制代码

各个功能与 Vue 组件结合

将state和getter结合进组件需要使用计算属性：

computed: {count () {return this.$store.state.count // 或者 return this.$store.getter.count2}}
复制代码

将mutation和action结合进组件需要在methods中调用this.$store.commit()或者this.$store.commit():

methods: {changeDate () {this.$store.commit('change');},changeDateAsync () {this.$store.commit('changeAsync');}
}复制代码

为了简便起见，Vuex 提供了四个方法用来方便的将这些功能结合进组件。

mapState
mapGetters
mapMutations
mapActions

示例代码：

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'// ....
computed: {localComputed () { /* ... */ },...mapState({// 为了能够使用 `this` 获取局部状态，必须使用常规函数count(state) {return state.count + this.localCount}}),...mapGetters({getterCount(state, getters) {return state.count + this.localCount}})
}
methods: {...mapMutations({add: 'increment' // 将 `this.add()` 映射为`this.$store.commit('increment')`}),...mapActions({add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`})
}
复制代码

如果结合进组件之后不想改变名字，可以直接使用数组的方式。

methods: {...mapActions(['increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`// `mapActions` 也支持载荷：'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`]),
}复制代码

将 store分割为模块。

可以将应用的store分割为小模块，每个模块也都拥有所有的东西:state, getters, mutations, actions。
首先创建子模块的文件：

// initial state
const state = {added: [],checkoutStatus: null
}
// getters
const getters = {checkoutStatus: state => state.checkoutStatus
}
// actions
const actions = {checkout ({ commit, state }, products) {}
}
// mutations
const mutations = {mutation1 (state, { id }) {}
}
export default {state,getters,actions,mutations
}
复制代码

然后在总模块中引入：

import Vuex from 'vuex'
import products from './modules/products' //引入子模块Vue.use(Vuex)
export default new Vuex.Store({modules: {products   // 添加进模块中}
})
复制代码

其实还存在命名空间的概念，大型应用会使用。需要时查看文档即可。Vuex的基本使用大致如此。

参考

https://www.jianshu.com/p/aae7fee46c36

https://vuex.vuejs.org/zh/guide/modules.html

转载于:https://juejin.im/post/5b573babf265da0fa50a1cad