import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import modulea from "./modulea"
export default new Vuex.Store({
state: {
message: "hello action",
name: "xiaoming"
},
mutations: {
set_message(state, args) {
state.message = args;
}
},
actions: {
setMessage({ commit }, args) {
commit("set_message", args);
}
},
getters: {
newMessage(state) {
return state.message.split("").reverse().join("");
}
},
modules: {
a: modulea
}
});
modulea.js
const user = {
namespace: true,
state: {
"name": "zz"
},
actions: {
deal1({ commit }, args) {
console.log("deal1");
}
},
getters: {
title() {
return "wyj";
}
},
mutations: {
},
modules: {
}
}
export default user;
然后在组件about.vue 中使用
我要说的是state 区分,别的 getters actions 不区分
about.vue
<template>
<div>
<p>{
{title}}</p>
<el-button @click="deal1">setMessage</el-button>
</div>
</template>
<script>
import { mapState, mapActions, mapGetters } from "vuex";
export default {
computed: {
...mapState({
name: state => state.name,
name2: state => state.a.name,
message: state => state.message
}),
// 不带 namespace:true 则不带命名空间,
...mapGetters(["newMessage", "title"])
},
methods: {
...mapActions(["deal1"])
}
};
</script>
<style lang="scss" scoped>
</style>
在这里我们分别截图下:
好了,这篇就到这里,下一篇,我们就得加namespace 了,这个写法又得变