學習vue——vuex（state、mutations、actions、getters、分模塊）
一、獲取公共數據
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 100,
title: 'zd'
}
})
export default store
html 的獲取方式
// 方法一 <h5>{{ $store.state.count }}</h5> // 方法二（簡寫模式） <h4>{{ count }}-{{ title }}</h4> import { mapState } from 'vuex' computed:{ ...mapState(['count','title']) },
js 獲取
created(){
console.log(this.$store.state.count)
}
二、修改公共數據（mutations）
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 100,
title: 'zd'
},
mutations: {
updateCount(state,val){
state.count += val
}
}
})
export default store
this.$store.commit('updateCount',20)
created(){
console.log(this.$store.state.count)
this.$store.commit('updateCount',20)
console.log(this.$store.state.count)
}
簡寫：...mapMutations(['updateCount'])
<button @click="useFaction">ues</button> import { mapState,mapMutations } from 'vuex' methods:{ ...mapMutations(['updateCount']), useFaction(){ this.updateCount(11) } },
三、異步方法（actions）
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 100,
title: 'zd'
},
mutations: {
updateCount(state,val){
state.count += val
}
},
// 異步方法，context指倉庫
actions: {
asyncFuction(context,val){
context.commit('updateCount',val)
}
}
})
export default store
import { mapState,mapMutations,mapActions } from 'vuex'
methods:{
...mapMutations(['updateCount']),
...mapActions(['asyncFuction']),
useFaction(){
this.asyncFuction(11) // 簡寫調用
}
},
created(){
console.log(this.$store.state.count)
this.$store.dispatch('asyncFuction',100) // 正常調用
console.log(this.$store.state.count)
}
四、計算屬性（getter）
store/index.js
1 import Vue from 'vue' 2 import Vuex from 'vuex' 3 Vue.use(Vuex) 4 const store = new Vuex.Store({ 5 state: { 6 count: 100, 7 title: 'zd', 8 ls: [2,5,1,7,9] 9 }, 10 mutations: { 11 updateCount(state,val){ 12 state.count += val 13 } 14 }, 15 // 異步方法，context指倉庫 16 actions: { 17 asyncFuction(context,val){ 18 context.commit('updateCount',val) 19 } 20 }, 21 // 計算屬性 22 getters: { 23 getterFaction(state){ 24 return state.ls.filter(item => item > 5) // 必須要有返回值 25 } 26 } 27 28 29 }) 30 31 export default store
使用
// 方法一 <h4>{{ $store.getters.getterFaction }}</h4> // 方法二 <h5>{{ getterFaction }}</h5> computed:{ ...mapState(['count','title']), ...mapGetters(['getterFaction']) },
五、分模塊
目錄結構
user.js
1 const state = { 2 userInfo:{ 3 age: 18, 4 name: "zhangdan" 5 }, 6 addr: "朝陽區大屯路16號3-1-1" 7 } 8 const mutations = { 9 userMutationFaction(state,val){ 10 state.userInfo = val 11 } 12 } 13 const actions = { 14 asyncUserAction(context,val){ 15 context.commit('userMutationFaction',val) 16 } 17 } 18 const getters = { 19 toUper(state){ 20 return state.userInfo.name.toUpperCase() 21 } 22 } 23 24 export default { 25 namespaced: true,// 命名空間 26 state, 27 mutations, 28 actions, 29 getters 30 }
1 import Vue from 'vue' 2 import Vuex from 'vuex' 3 import user from './modules/user' 4 import settings from './modules/settings' 5 6 Vue.use(Vuex) 7 const store = new Vuex.Store({ 8 state: { 9 count: 100, 10 title: 'zd', 11 ls: [2,5,1,7,9] 12 }, 13 mutations: { 14 updateCount(state,val){ 15 state.count += val 16 } 17 }, 18 // 異步方法，context指倉庫 19 actions: { 20 asyncFuction(context,val){ 21 context.commit('updateCount',val) 22 } 23 }, 24 // 計算屬性 25 getters: { 26 getterFaction(state){ 27 return state.ls.filter(item => item > 5) 28 } 29 }, 30 // 導出 31 modules: { 32 user, 33 settings 34 } 35 36 }) 37 38 export default store
state、getter（原生取法、命名空間取法）
<!-- state 的原生取法 --> <p>{{ $store.state.user.addr }}</p> <p>{{ $store.state.user.userInfo.name }}</p> <p>{{ settings.color }}</p> <hr> <!-- getter 的原生取法 --> <p>{{ $store.getters['user/toUper'] }}</p> <!-- state 的命名空間取法 --> <p>{{ userInfo }}</p> <!-- getter 的命名空間取法 --> <p>{{ toUper }}</p>
computed:{
...mapState('user',['userInfo']),
...mapGetters('user',['toUper'])
},
mutations、actions（原生取法、命名空間取法）
1 methods:{ 2 ...mapMutations('user',['userMutationFaction']), 3 ...mapActions('user',['asyncUserAction']), 4 // mutations 的取法 5 useFaction(){ 6 // 方法一,原生 7 this.$store.commit('user/userMutationFaction',{ 8 name: 'qiaowenjun', 9 age:20 10 }) 11 // 方法二，命名空間 12 this.userMutationFaction(100) 13 }, 14 15 // actions 的取法 16 useUseAction(){ 17 // 方法一,原生 18 this.$store.dispatch('user/asyncUserAction',{ 19 name: 'guojiahui', 20 age:24 21 }) 22 23 // 方法二，命名空間 24 this.asyncUserAction({ 25 name: 'fenmeilian', 26 age: 45 27 }) 28 29 } 30 },
浙公網安備 33010602011771號