main.js
import Vue from "vue";
import App from "./App.vue";
import store from "./vuex/store";
import Vuex from "vuex";
Vue.use(Vuex);
Vue.config.productionTip = false;
new Vue({
store, //从跟组件注入`Vuex.Store`
render: h => h(App)
}).$mount("#app");
store.js
import Vue from "vue";
import Vuex from "vuex";
import app from "./modules/app";
import getters from "./getters";
Vue.use(Vuex);
export default new Vuex.Store(
modules: { app },//暴露的模块 -> 可以访问方法(actions/mutations)
getters //暴露的state -> 可以访问属性(this.sysCode)
});
app.js
export default {
namespaced: true,
state: {
sysUser: {},
sysCode: { aaa: "111", bbb: "222" }
},
mutations: {
setSysUser(state, user) {
state.sysUser = user;
},
setSysCode(state, code) {
state.sysCode = code;
}
},
actions: {
userLoad(context, code) {
context.commit("setSysUser", code);
},
codeLoad({ commit }, code) {
commit("setSysCode", code);
}
}
};
getters.js
export default {
// namespaced = true -> 使用全局路径
sysUser: state => state.app.sysUser,
sysCode: state => state.app.sysCode
};
App.vuex
<template>
<div>
<Count></Count>
</div>
</template>
<script>
import Count from "@/components/count.vue";
export default {
components: { Count }
};
</script>
<style>
</style>
count.vue
<template>
<div>
<h3>{{sysUser.name}}</h3>
<h3>{{sysUser.age}}</h3>
<button @click="refresh">手动刷新</button>
<h3>{{sysCode.aaa}}</h3>
<h3>{{sysCode.bbb}}</h3>
</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
computed: {
...mapGetters(["sysUser", "sysCode"])
},
methods: {
datas() {
return { name: "6", age: 16 };
},
refresh() {
this.$store.dispatch("app/userLoad", this.datas());
}
}
};
</script>