之前在做旅游页的时候对 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.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 的实例上.
- 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.
- <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 https://github.com/evenyao/vuex-singleStore
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 https://github.com/evenyao/vuex-modulesStore.git
来源: http://www.jianshu.com/p/760c08993904