玩烂 Vuex

Vuex 概念篇

Vuex 是什么？

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

什么是“状态管理模式”？

从软件设计的角度，就是以一种统一的约定和准则，对全局共享状态数据进行管理和操作的设计理念。你必须按照这种设计理念和架构来对你项目里共享状态数据进行CRUD。所以所谓的“状态管理模式”就是一种软件设计的一种架构模式（思想）。

为什么需要这种“状态管理模式”应用到项目中呢？

npm i vuex -S

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)

<div id="app">  <p>{{ count }}</p>  <p>    <button @click="increment">+</button>    <button @click="decrement">-</button>  </p></div>

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex) // Vuex 注册到 Vue 中// 创建一个 storeconst store = new Vuex.Store({  // 初始化 state     state: {    count: 0  }, // 改变状态唯一声明处  mutations: {  	increment: state => state.count++,    decrement: state => state.count--  }})new Vue({  el: '#app',  // 从根组件将 store 的实例注入到所有的子组件    store,    computed: {    count () {        // Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性中返回某个状态,        // 每当状态 count 发生变化，都会重新求取计算	    return this.$store.state.count    }  },  methods: {    increment () {      this.$store.commit('increment')    },    decrement () {    	this.$store.commit('decrement')    }  }})

this.$store.state('count') // => 0this.$store.commit('increment') // => 1

 computed: {    count () {	    return this.$store.state.count    } }// 使用 mapStateimport { mapState } from 'vuex' // 需要先导入computed: mapState([    // 箭头函数方式	count: state => state.count ,        // or 传字符串参数方式, 'count' 等同于 state => state.count    countAlias: 'count'        // 获取状态后，你还需要和当前组件别的属性值时,就必须使用常规函数的写法了, 只有这样才能获取到当前组件的 this    countPlusLocalState (state) {    	return state.count + this.localCount    } ])

computed: mapState([    // 映射 `this.count` 为 `this.$store.state.count`	'count'])

computed: {	...mapState({		count: state => state.count        }),       localComputed () {   	   /* ... */    }     }

{    "presets": [        "env",        "stage-1" // 添加此项    ],    "plugins": [        "transform-vue-jsx",        "syntax-dynamic-import"    ]}

computed: {  doneTodosCount () {    return this.$store.state.todos.filter(todo => todo.done).length  }}

const store = new Vuex.Store({  state: {    todos: [      { id: 1, text: '...', done: true },      { id: 2, text: '...', done: false }    ]  },  //  `Getter` 默认第一个参数为 `state`:    getters: {    doneTodos: state => {      return state.todos.filter( todo => todo.done )    }  }})//  组件中获取，通过属性访问computed: {	doneTodosCount () {    	return this.$store.getters.doneTodos.length    } }

️ 注意： getter 在通过属性访问时是作为 Vue 的响应式系统的一部分进行缓存。

Getter 还接受其他 getter 作为第二个参数

const store = new Vuex.Store({  state: {    todos: [      { id: 1, text: '...', done: true },      { id: 2, text: '...', done: false }    ]  },  getters: {    doneTodos: state => {      return state.todos.filter( todo => todo.done )    },    // 第二个参数为 getters      doneTodosLength: (state, getters) => {    	return getters.doneTodos.length    }    }})

getters: {	// ...        getTodoById: state => id => {    	return state.todos.find( todo => todo.id === id )    }}

this.$store.getters.getTodoById(2) // => { id: 2, text: '...', done: false }

️ 注意：getter 在通过方法访问时，每次都会去进行调用，而不会缓存结果。

mapGetters 辅助函数

和前面 mapState 辅助函数作用和使用上基本相同。

import { mapGetters } from 'vuex'// getter 名称和 计算属性名称相同的情况下，可以传递字符串数组export default {  // ...  computed: {  	...mapGetters([    	'doneTodos'    ])  }}// 传递对象的方式export default {  // ...  computed: {  	...mapGetters({    	doneTodos: 'doneTodos',        getTodoById: 'getTodoById' // 此处传递回来的是一个函数，所以在使用的时候 => {{ getTodoById(2) }}    })  }}

const store = new Vuex.Store({  state: {    count: 1  },  mutations: {    // increment 事件类型（type）名称，increment() 回调函数    // increment: function (state) {}  原本写法    increment (state) {      // 变更状态      state.count++    }  }})

this.$store.commit('increment')

this.$store.commit('increment', 10) // orthis.$store.commit('increment', { num: 10 }) 

this.$store.commit({	type: 'increment',    num: 10})

import { mapMutations } from 'vuex'export default {  // ...  methods: {    // 传递字符串数组，同名哦～      ...mapMutations([      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`      // `mapMutations` 也支持载荷：      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`    ]),          // 传递对象      ...mapMutations({      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`    })  }}

const store = new Vuex.Store({  state: {    count: 0  },  mutations: {    increment (state) {      state.count++    }  },  actions: {     // 实践中，经常用到参数解构来简化代码， increment ({commit}) { commit('') }    increment (context) {      context.commit('increment')    }  }})

this.$store.dispatch('increment')// 以传递额外参数分发store.dispatch('incrementAsync', {  amount: 10})// 以对象形式分发store.dispatch({  type: 'incrementAsync',  amount: 10})

import { mapActions } from 'vuex'export default {  // ...  methods: {     ...mapActions([      'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`      // `mapActions` 也支持载荷：      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`    ]),          // 传递对象      ...mapActions({      add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`    })  }}

actions: {  actionA ({ commit }) {    return new Promise((resolve, reject) => {      setTimeout(() => {        commit('someMutation')        resolve()      }, 1000)    })  }}

store.dispatch('actionA').then(() => {  // ...})

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

const moduleA = {  state: { ... },  mutations: { ... },  actions: { ... },  getters: { ... }}const moduleB = {  state: { ... },  mutations: { ... },  actions: { ... }}const store = new Vuex.Store({  modules: {    a: moduleA,    b: moduleB  }})store.state.a // -> moduleA 的状态store.state.b // -> moduleB 的状态

const store = new Vuex.Store({  modules: {    account: {      namespaced: true, // 开启命名空间      // 模块内容（module assets）      state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响      getters: {        isAdmin () { ... } // -> getters['account/isAdmin'] 调用时以路径的形式表明归属      },      actions: {        login () { ... } // -> dispatch('account/login')      },      mutations: {        login () { ... } // -> commit('account/login')      },      // 嵌套模块      modules: {        // 继承父模块的命名空间        myPage: {          state: { ... },          getters: {            profile () { ... } // -> getters['account/profile']          }        },        // 进一步嵌套命名空间        posts: {          namespaced: true,          state: { ... },          getters: {            popular () { ... } // -> getters['account/posts/popular']          }        }      }    }  }})

modules: {  foo: {    namespaced: true,    getters: {      // 在这个模块的 getter 中，`getters` 被局部化了      // 全局的 state 和 getters 可以作为第三、四个参数进行传入，从而访问全局 state 和 getters      someGetter (state, getters, rootState, rootGetters) {        getters.someOtherGetter // -> 'foo/someOtherGetter'        rootGetters.someOtherGetter // -> 'someOtherGetter'      },      someOtherGetter: state => { ... }    },    actions: {      // 在这个模块中， dispatch 和 commit 也被局部化了      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit      someAction ({ dispatch, commit, getters, rootGetters }) {        getters.someGetter // -> 'foo/someGetter'        rootGetters.someGetter // -> 'someGetter'        dispatch('someOtherAction') // -> 'foo/someOtherAction'        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'        commit('someMutation') // -> 'foo/someMutation'        commit('someMutation', null, { root: true }) // -> 'someMutation'      },      someOtherAction (ctx, payload) { ... }    }  }}

{  actions: {    someOtherAction ({dispatch}) {      dispatch('someAction')    }  },  modules: {    foo: {      namespaced: true,      actions: {        someAction: {          root: true,          handler (namespacedContext, payload) { ... } // -> 'someAction'        }      }    }  }}

computed: {  ...mapState('some/nested/module', {    a: state => state.a,    b: state => state.b  })},methods: {  ...mapActions('some/nested/module', [    'foo',    'bar'  ])}

import { createNamespacedHelpers } from 'vuex'const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')export default {  computed: {    // 在 `some/nested/module` 中查找    ...mapState({      a: state => state.a,      b: state => state.b    })  },  methods: {    // 在 `some/nested/module` 中查找    ...mapActions([      'foo',      'bar'    ])  }}

模块动态注册

在 store 创建之后，你可以使用 store.registerModule 方法注册模块：

// 注册模块 `myModule`store.registerModule('myModule', {  // ...})// 注册嵌套模块 `nested/myModule`store.registerModule(['nested', 'myModule'], {  // ...})