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.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
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
上一篇: 海豹被饲养员量屁屁体温,这表情嘿嘿嘿