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,之后分别定义 statemutationsactions,并通过 export default new Vuex.Store({state, mutations, actions}) 模块化。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// store.js
import 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 的实例上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue'
import App from './App.vue'
import store from './store'

// Vue-Cli 3.x
new 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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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

除此之外还可以使用 param 传参的方式,具体查看 Demomodulesc.js 为传参方式。

main.js

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

1
2
3
import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

使用 $store

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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

本文结束  感谢您的阅读
0%