store.js
import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from 'vuex-persistedstate'
Vue.use(Vuex);
//什么时候用module
//1.状态树结构复杂时，
//2.多人协同开发项目时，避免命名冲突
const moduleA={
namespaced:true, //开启命名空间
state:{
name:"我是moduleA中的name",
test:"我是moduleA中的test"
},
mutations:{
changeName(state,payload){
state.name=payload
},
changeTest(state,payload){
state.test=payload
}
},
actions:{}
}
const moduleB={
namespaced:true,
state:{
name:"我是moduleB中的name",
test:"我是moduleB中的test"
},
mutations:{ },
actions:{ }
}
const state={
count:100,
name:"我是根模块"
}
const mutations={
increment(state,val){
state.count++
},
decrement(state,val){
state.count-=val
}
}
const actions={
asyncCount(context,val){
setTimeout(()=>{
context.commit("increment")
},3000)
}
}
let store = new Vuex.Store({
modules:{
moduleA,
moduleB
},
state,
mutations,
actions,
})
export default store;
组件内
<template>
<div class="home">
<div>
<!-- 直接获取 -->
{{this.$store.state.name}}
{{this.$store.state.moduleA.name}}
{{this.$store.state.moduleA.test}}
{{this.$store.state.moduleB.test}}
</div>
<!-- 语法糖形式获取 -->
<div>
{{vname}}
{{test1Name}}
{{test2Name}}
<button @click="changeName(123)">click</button>
<button @click="changeTest(456)">click</button>
</div>
</div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
//注意!mapState,mapGetters必须放在computed里面,
//注意!mapMutations,mapActions必须放在methods里面
export default {
name: 'home',
data () {
return {
}
},
computed:{
...mapState({
vname:"name"
}),
...mapState("moduleA",{
test1Name:"name"
}),
...mapState("moduleB",{
test2Name:"test"
})
},
methods:{
decrement(){
this.$store.commit("decrement",3)
},
increment(){
this.$store.commit("increment");
this.$store.dispatch("asyncCount")
},
...mapMutations("moduleA",['changeName','changeTest'])
}
}
</script>
<style scoped>
</style>
