Vuex 单状态库与多模块状态库详解

什么情况下使用vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

之前在做旅游页的时候对 Vuex 进行了简单的了解。近期在做 Vue 项目的同时重新学习了 Vuex 。本篇博文主要总结一下 Vuex 单状态库和多模块 modules 的两类使用场景。

本篇所有代码是基于 Vue-Cli 3.x 版本的脚手架工具进行编写的。

vuex 单状态库 Demo

这是一个仅有单个 Vuex store 状态库的 Demo。当项目中使用一个 Vuex 状态库就已经足够的时候，可以使用这种方式。

本 Demo 使用了一个 increment 与 decrement 的 增 / 减 事件来体现 store 数据的变化。

store.js

由于状态库是单一的，仅有一个 store.js 文件管理状态库。在该文件中一开始进行 import 的引入，然后使用 Vue.use(Vuex) 使用 Vuex，之后分别定义 state、mutations 和 actions，并通过 export default new Vuex.Store({state, mutations, actions}) 模块化。

// store.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const state = { count: 1}const mutations = { increment(state) {  state.count ++ }, decrement(state) {  state.count -- }}const actions = { increment:({commit}) => {  commit('increment') }, decrement:({commit}) => {  commit('decrement') }}export default new Vuex.Store({state, mutations, actions})

main.js

在入口文件 main.js 中通过 import 引入 store，并注册到 Vue 的实例上。

import Vue from 'vue'import App from './App.vue'import store from './store'// Vue-Cli 3.xnew Vue({ render: h => h(App), router, store}).$mount('#app')// Vue-Cli 2.x// new Vue({//  el: '#app',//  router,//  store,//  components: { App },//  template: '<App/>'// })

使用 $store

在相应的组件中如下引入并在 methods 中使用 mapActions。

<template> <div class="vuex">  Vuex 全局 Store count {{$store.state.count}}  <button type="button" name="button" @click="increment">加</button>  <button type="button" name="button" @click="decrement">减</button> </div></template><script>import { mapActions } from 'vuex'export default { methods: mapActions([  'increment',  'decrement' ])}</script><style scoped></style>

Demo

关于单状态库的 Demo 请参考此 github

Github Demo 

vuex 多模块状态库 Demo

当项目变得非常庞大，单个 store 无法满足需求的时候，可以通过多模块状态库管理多个 store，将各类状态分类进行维护。