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

2019-11-19 12:21:30

字体：大中小

来源：转载

供稿：网友

什么情况下使用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，将各类状态分类进行维护。

本 Demo 使用了 add 与 reduce 的增 / 减事件来体现 store 数据的变化。

store

由于需要管理多个 store，因此在项目目录中创建 store 文件夹，并创建 modules 文件夹用来放置各个 store文件，并使用 index.js 作为入口文件。具体结构请查看 Demo。

main.js

同样在 main.js 中通过 import 引入 store，但这里是引入 index.js 这个入口文件。

import Vue from 'vue'import App from './App.vue'import store from './store/index'

使用 $store

除了使用方式有一定不同之外，methods 中的 mapActions 也更换了书写方式，第一个参数是对应 store 管理的数据，第二个参数是关于操作事件的数组。

<template lang="html"> <div class="a">  page a {{$store.state.countA.countA}}  <button type="button" name="button" @click="add">增加</button>  <button type="button" name="button" @click="reduce">删减</button> </div></template><script>import { mapActions } from 'vuex'export default { methods: mapActions('countA',['add','reduce'])}</script><style lang="css"></style>

Demo

关于多模块状态库的 Demo 请参考此 github

Github Demo

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：简单的React SSR服务器渲染实现

下一篇：微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例