模塊化+命名空間
1, 目的： 讓代碼更好維護(hù)
2, 修改store.js
store/Count.js:
注意：namespaced:true, 開啟命名空間
export default {
namespaced:true,
//準(zhǔn)備actions--用于響應(yīng)組件中的動(dòng)作
actions:{
increment(context,value){
context.commit('INCREMENT',value)
//commit中的increment: 對(duì)應(yīng)mutations中的increment方法
}
},
//準(zhǔn)備mutations--用于操作數(shù)據(jù)(state)
mutations:{
INCREMENT(state,value){
state.sum += value
console.log(value,state.sum);
},
DEINCREMENT(state,value){
console.log("a",value);
state.sum -= value
}
},
//準(zhǔn)備state = {}
state:{
sum:1,
school:"南昌雅騰",
subject: "java"
},
//準(zhǔn)備getters , 用于加工state中的數(shù)據(jù)， 類似于computed屬性
getters:{
bigSum(state){
return state.sum * 10
}
}
}2, store/index.js
//該文件用于創(chuàng)建Vuex中最為核心 的store
//引入vue
import Vue from "vue";
//引入vuex庫(kù)
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex) //讓各個(gè)組件中擁有store屬性
import CountAbout from './Count'
export default new Vuex.Store({
modules:{
CountAbout
//......同理，可以引入其它vuex
}
})3. 開啟命名空間后，組件中讀取state數(shù)據(jù):
//方式一： 自己直接讀取
this.$store.state.CountAbout.school
//方法二： 借助mapState讀取
...mapState('CountAbout',['sum','school','subject'])4， 開啟命名空間后，組件中讀取getters數(shù)據(jù)
//方式一： 自己直接讀取
this.$store.getters['CountAbout/bigSum']
//方法二： 借助mapGetters讀取
...mapGetters('CountAbout',['bigSum'])5， 開啟命名空間后，組件中調(diào)用dispatch
//方式一： 自己直接讀取
this.$store.dispatch('CountAbout/increment')
//方法二： 借助mapGetters讀取
...mapActions('CountAbout',['increment'])6， 開啟命名空間后，組件中調(diào)用commit
//方式一： 自己直接讀取
this.$store.commit('CountAbout/DEINCREMENT')
//方法二： 借助mapGetters讀取
...mapMutations('CountAbout',['DEINCREMENT']),詳細(xì)借助調(diào)用：
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
<template>
<div>
<p>當(dāng)前的和是:{{sum}}</p>
<p>當(dāng)前的和*10的結(jié)果是:{{bigSum}}</p>
<p>我在{{school}}, 學(xué)習(xí){{subject}}</p>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button @click="increment(n)">加一</button>
<button @click="DEINCREMENT(n)">減一</button>
</div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
name:'Count',
data() {
return {
n:1
}
},
methods:{
//程序員自己寫
// deincrement(){
// this.$store.commit('DEINCREMENT',this.n)
// //commit中的increment: 對(duì)應(yīng)store.js中mutations中的increment方法
// //如果不需要actions做什么(即不需要服務(wù)員做什么), 可以直接找后廚
// },
//借助mapMutations生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用commit去聯(lián)系mutations(對(duì)象寫法)
// ...mapMutations({'DEINCREMENT':'DEINCREMENT'})
//借助mapMutations生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用commit去聯(lián)系mutations(數(shù)組寫法)
...mapMutations('CountAbout',['DEINCREMENT']),
//注意，以上調(diào)用方法要傳值
//程序員自己寫
// increment(){
// this.$store.dispatch('increment',this.n)
// //dispatch中的increment: 對(duì)應(yīng)store.js中actions中的increment方法
// },
//借助mapActions生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用dispatch去聯(lián)系actions(對(duì)象寫法)
// ...mapActions({'increment':'increment'})
//借助mapActions生成對(duì)應(yīng)的方法，方法中會(huì)調(diào)用dispatch去聯(lián)系actions(數(shù)組寫法)
...mapActions('CountAbout',['increment'])
},
computed:{
//借助mapState生成計(jì)算屬性, 從state中讀取數(shù)據(jù)(對(duì)象寫法)
// ...mapState({sum:'sum',school:'school',subject:'subject'}),
//借助mapState生成計(jì)算屬性, 從state中讀取數(shù)據(jù)(數(shù)組寫法)
...mapState('CountAbout',['sum','school','subject']),
//以上相當(dāng)于下面的寫法
// sum(){
// return this.$store.state.sum
// },
// school(){
// return this.$store.state.school
// },
// subject(){
// return this.$store.state.subject
// }
//借助mapGetters生成計(jì)算屬性, 從getters中讀取數(shù)據(jù)(對(duì)象寫法)
// ...mapGetters({bigSum:'bigSum'})
//借助mapGetters生成計(jì)算屬性, 從getters中讀取數(shù)據(jù)(數(shù)組寫法)
...mapGetters('CountAbout',['bigSum'])
//以上相當(dāng)于下面的寫法
// ,bigSum(){
// return this.$store.getters.bigSum
// }
},
mounted() {
const x = mapState({sum:'sum',school:'school',subject:'subject'})
console.log(x);
},
}
</script>
<style>
</style>