详解在Vue中如何模块化使用Vuex
作者：JacksonChen_
这篇文章给大家介绍了在Vue 中如何模块化使用 Vuex,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下
正常使用
// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0, // 一个简单的状态示例
},
mutations: {
increment(state) {
state.count++;
},
decrement(state) {
state.count--;
},
},
actions: {
increment(context) {
context.commit('increment');
},
decrement(context) {
context.commit('decrement');
},
},
getters: {
getCount: state => state.count,
},
});在组件中使用 Vuex： 在需要访问或修改状态的组件中，你可以使用Vuex提供的辅助函数。
// src/components/Counter.vue
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: {
...mapState(['count']),
},
methods: {
...mapActions(['increment', 'decrement']),
},
};
</script>模块化使用
优点
在个人小项目当中，不使用模块化没什么问题，但是在公司或者大型项目下就需要使用模块化管理，使用模块化有利于可维护性、团队协作、代码结构清晰、提高可读性等优点。
假设你有两个模块，一个用于管理用户信息，另一个用于管理商品信息。
首先，分别创建两个 Vuex 模块文件：
模块文件
userModule.js
// userModule.js
const state = {
user: null,
userName:"张三"
};
const mutations = {
SET_USER(state, user) {
state.user = user;
},
};
const actions = {
setUser({ commit }, user) {
commit("SET_USER", user);
},
};
export default {
namespaced: true,
state,
mutations,
actions,
};productModule.js
// productModule.js
const state = {
products: [],
productName:'电脑'
};
const mutations = {
ADD_PRODUCT(state, product) {
state.products.push(product);
},
};
const actions = {
addProduct({ commit }, product) {
commit("ADD_PRODUCT", product);
},
};
export default {
namespaced: true,
state,
mutations,
actions,
};集中模块的状态到 Getters，方便页面中使用
在根级 Vuex Store 中创建 Getters，用于集中所有模块的状态数据：
getters.js
// getters.js
export default {
userName: state => state.user.userName,
productName: state => state.product.productName,
};创建根级的 Vuex Store 文件，将上述的模块引入并注册：
store.js
import Vue from 'vue';
import Vuex from 'vuex';
import userModule from './userModule';
import productModule from './productModule';
import getters from './getters'; // 导入 getters 为对象
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user: userModule,
product: productModule,
},
getters,
});
export default store;页面使用
<template>
<div>
<h1>User Name: {{ userName }}</h1>
</div>
</template>
<script>
export default {
computed: {
userName() {
return this.$store.getters.userName;
}
},
mounted() {
this.$store.dispatch("user/setUser", { userName: "John Doe" });
this.$store.dispatch("product/addProduct", { name: "Product A" });
},
};
</script>到此这篇关于详解在Vue中如何模块化使用Vuex的文章就介绍到这了,更多相关Vue模块化使用Vuex内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！