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