今天小编给大家分享一下Vuex Module状态仓库分割如何使用的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
vuex主要包含以下五个部分:
State // 存储变量、数据
Getter // 类似计算属性
Mutation // 唯一修改state的方法
Action // 异步调用Mutation
Module // 将store模块化
在此示例中，我创建了两个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 customsprofile.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 commonindex.js
import Vue from 'vue'
import Vuex from 'vuex'
// 引入子store
import 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: <h6>{{vuexName}}</h6> <button @click='setName'>chenge name</button>
age: <h6>{{vuexAge}}</h6> <button @click='setAge'>chenge age</button>
bool: <h6>{{vuexBool}}</h6> <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';
// style
import './../../sass/app.scss';
// Components
import Main from './Main.vue';
import routes from './routes';
// store
import store from './store'; // 将store挂载到Vue
Vue.use(VueRouter);
const router = new VueRouter({
routes,
saveScrollPosition: true,
});
new Vue({ router, store, ...Main }).$mount('#app');初始效果图 ⬇️
点击按钮之后效果图 ⬇️
以上就是“Vuex Module状态仓库分割如何使用”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
