vuex构成vuex主要包含以下五个部分:
state // 存储变量、数据getter // 类似计算属性mutation // 唯一修改state的方法action // 异步调用mutationmodule // 将store模块化vuex的modules使用创建目录
在此示例中，我创建了两个store文件，分别是 profile.js和custom.js，一个根文件index.js
custom.js
const customs = { namespaced: true, // 创建命名空间 state: { // 存储变量 showalert: false }, mutations: { // 定义修改state方法 changeshow: (state, params) => { state.showalert = !state.showalert } }, actions: { // 异步调用mutations setshow: ({ commit }) => { commit('changeshow') } }, getters: { // 将数据过滤输出 bodyshow: state => state.showalert }}export default customs
profile.js
const profile = { namespaced: true, state: { name: 'common name', age: 18, bool: false }, mutations: { changemsg: (state, params) => { state.name = params }, changeage: (state, params) => { state.name = params }, changebool: (state) => { state.bool = !state.bool } }, actions: { setname: ({ commit }) => { commit('changemsg', 'vuex common name') }, setage: ({ commit }) => { commit('changeage', 81) }, setbool: ({ commit }) => { commit('changebool') } }, getters: { vuexname: state => state.name, vuexage: state => state.age, vuexbool: state => state.bool }}export default common
index.js
import vue from 'vue'import vuex from 'vuex'// 引入子storeimport profile from './modules/profile'import customs from './modules/customs'// vue.use(vuex)const store = new vuex.store({ modules: { profile, customs }})export default store // 导出store，以便于后续使用
在需要使用的.vue文件里进行使用。方法如下
index.vue
<template> <div> name: <h5>{{vuexname}}</h5> <button @click='setname'>chenge name</button> age: <h5>{{vuexage}}</h5> <button @click='setage'>chenge age</button> bool: <h5>{{vuexbool}}</h5> <button @click='setbool'>chenge bool</button> <br/> <span @click='setshow' style='display:inline-block;width:200px;height:30px;border:1px solid #999;border-radius:5px;text-align:center;line-height:30px;cursor: pointer;'>click me ,change showalert</span> <em>{{bodyshow}}</em> </div></template><script>import { mapactions, mapgetters } from 'vuex'export default {computed: { ...mapgetters('profile', ['vuexname', 'vuexage', 'vuexbool']), ...mapgetters('customs', ['bodyshow']) },methods: { ...mapactions('customs', ['setshow']), ...mapactions('profile', ['setname', 'setage', 'setbool']),}</script><style></style>
app.js
import vue from 'vue';import vuerouter from 'vue-router';// styleimport './../../sass/app.scss';// componentsimport main from './main.vue';import routes from './routes';// storeimport store from './store'; // 将store挂载到vuevue.use(vuerouter);const router = new vuerouter({ routes, savescrollposition: true,});new vue({ router, store, ...main }).$mount('#app');
初始效果图 ⬇️
点击按钮之后效果图 ⬇️
至此，modules使用流程演示完毕！【相关推荐：vue.js视频教程】
以上就是vuex module-状态仓库分割的使用介绍的详细内容。