一梨州、安裝和使用
npm install vuex
創(chuàng)建一個(gè)store/index.js文件安裝vuex并導(dǎo)出store
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = {
// state, actions, mutations, getters
}
export default new Vuex.Store(store)
在main.js中注入store
import store from './store'
new Vue({
// ....,
store
})
這樣，在組件中使用this.$store即可訪問(wèn)store實(shí)例
二授翻、工作流程
)
三、組成部分
state
使用state字段聲明
const store = {
state: {
state1: 'state1'
}
}
使用this.$store.state獲取
// 需要在組件的computed中使用
computed: {
state1 () {
// 獲取state中的state1
return this.$store.state.state1
}
}
也可以使用mapState進(jìn)行映射
import { mapState } from 'vuex'
computed: {
// mapState可以映射多個(gè) () => this.$store.state.state1函數(shù)
...mapState([
'state1',
'state2'
])
// 也可以這樣
...mapState({
'aliasState1': state => state.state1 // 將state1映射成組件的aliasState1
})
}
actions
actions聲明
const store = {
actions: {
action1 (context, payload) {
// context是一個(gè)擁有和$store一樣屬性和方法的對(duì)象
// payload是載荷，是dispatch傳遞的參數(shù)
// commit觸發(fā)mutations
context.commit('mutation1', payload)
}
}
}
使用this.$store.dispatch觸發(fā)action
methods: {
dispatchAction1 () {
// 這里的{ arg1: 'arg1' }是上面action1接收到的payload
this.$store.dispatch('action1', { arg1: 'arg1' })
// 也可以這樣
this.$store.dispatch({
type: 'action1', // 需要觸發(fā)的action
arg1: arg1,
// ... 其他參數(shù)
})
}
}
actions也有map函數(shù)mapActions
import { mapActions } from 'vuex'
methods: {
...mapActions([
'action1'
])
}
如果要傳遞參數(shù)今阳，那么需要action1(payload)這樣調(diào)用师溅，比如
<tag @click.natvie='action1(payload)'></tag>
也可以給mapActions傳入一個(gè)對(duì)象作為參數(shù)
methods: {
...mapActions ({
'aliasAction1': {
type: 'action1', // 需要觸發(fā)的action
arg1: 'arg1',
// ... 其他參數(shù)
},
// ...
})
}
異步操作（比如加載數(shù)據(jù)）一般放在actions中
mutations
mutations使用mutations字段聲明
mutations: {
mutation1 (state, payload) {
// payload是action提交的載荷（參數(shù)）
state.state1 = 'otherValue' // 改變state
}
}
state改變視圖就會(huì)改變，如果視圖沒(méi)改變
可能state的值的undefined
或者在組件中將state放在了data而不是computed中使用
getters
getters使用getters字段聲明
getters: {
getter1: (state, getters) {
// getters是其它getters
return // 返回一個(gè)用于computed的值
}
}
它的用法和state一樣盾舌，mapGetters也和mapState用法一樣
modules
使用modules字段可以拆分store墓臭，便于管理
const store = {
modules: {
module1: store1,
module2: store2
// ...
}，
// 根store的state矿筝，actoins起便，mutations, getters
}
modules中的store1, store2, ...都是store的實(shí)例，即包含state窖维，actoins榆综，mutations, getters，modules的對(duì)象铸史；module1 鼻疮，module2是模塊名
這時(shí)，使用方式有所變化：
state使用this.$store.state.moduleName來(lái)獲取
actions的dispatch方式?jīng)]變琳轿，不過(guò)actoin方法接收的context有所變化判沟，多了一個(gè)rootState屬性接收根state，而原來(lái)的state屬性變?yōu)楫?dāng)前模塊的state
getters方法接收的參數(shù)除了state崭篡，getters外挪哄，多一個(gè)參數(shù)rootState
mutations方法接收的state參數(shù)變?yōu)榫植康膕tate
modules中的
state，actoins琉闪，mutations, getters默認(rèn)被定義在全局空間迹炼，所以要避免局部和根部，局部和局部之間的命名沖突
除此以外颠毙，modules下的store實(shí)例還有一個(gè)namespaced字段斯入，如果它設(shè)置為true,則會(huì)將局部store定義在新的命名空間中
const store = {
modules: {
module1: {
state,
actions: {
action1 () {},
// 也可以
action1: {
root: true, // 如果為true，將action1定義在根部
handler () {} // 回調(diào)
}
},
mutations,
getters,
namespaced: true, // store定義在module1空間中
// 也可以嵌套
submodule1: {
// ....
namespaced: true // 命名空間為module1/submodule1
// 如果namespaced不為true或未定義蛀蜜，則繼承父的命名空間刻两，即module1
}
}
}
}
這時(shí)，使用方式在對(duì)比上面沒(méi)定義namespaced的有一下不同：
actions接收的context參數(shù)具有dispatch, commit, getters, rootGetters屬性
getters接收的參數(shù)變?yōu)?code>state, getters, rootState, rootGetters
map*函數(shù)（代指mapState, mapActions, mapGetters滴某，mapMutations）需要指定命名空間
...map*(`[命名空間]`, )
// 比如
...mapState('module1', [
'state1'
])
也可以使用createNamespacedHelpers固定命名空間
import { createNamespacedHelpers } from 'vuex'
const { map* } = createNamespacedHelpers('[命名空間]')
...map*()
比如：
import { createNamespacedHelpers } from 'vuex'
const { mapState } = createNamespacedHelpers('module1')
...mapState([
state1 // 映射為module1下的state1
])
