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 >