1.Vuex概述
1.1元件之間共享資料的方式
父向子傳值： v-bind 屬性綁定
子向父傳值： v-on 事件綁定
兄弟元件之間共享資料： EventBus
- $on ：接收資料的那個元件
- ** $emit ** ：發送資料的那個元件
1.2Vuex是什麼？
Vuex是實作元件全局狀态（資料）管理的一種機制，可以友善的實作元件之間的資料共享。
1.3使用Vuex統一管理狀态的好處
- 能夠在vuex中集中管理共享的資料，易于開發和後期的維護
- 能夠高效的實作元件之間的資料共享，提高開發效率
- 存儲在vuex中的資料都是響應式的，能夠實時保持資料與頁面的同步
一般情況下，隻有元件之間共享的資料，才有必要存儲到vuex中；對于元件中的私有資料，依舊存儲在元件自身的data中即可。
2Vuex的基本使用
1.安裝vuex依賴包
npm install vuex --save
2.導入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
3.建立store對象
const store = new Vuex.Store({
// state 中存放的就是全局共享的資料
state: { count : 0 }
})
4.将store對象挂載到vue執行個體中
new Vue({
el:"#app",
render:h => h(app),
router,
//将建立的共享資料對象，挂載到Vue執行個體中
// 所有的元件，就可以直接從store中擷取全局的資料了
store
})
3.Vuex的核心概念
3.1核心概念概述
Vuex中的主要核心概念如下：
- State
- Mutation
- Action
- Getter
- module
3.2 State
State提供唯一的公共資料源，所有共享的資料都要統一放到Store的State中進行存儲
// 建立store資料源，提供唯一公共資料
const store = new Vuex.Store({
state: { count : 0 }
})
元件通路State中資料的第一種方式：
this.$store.state.全局資料名稱
元件通路State中資料的第二種方式：
// 1.從vuex中按需導入mapState函數
import { mapState } from "vuex"
通過剛才導入的mapState函數，将目前元件需要的全局屬性，映射為目前元件的computed計算屬性：
// 2.将全局資料，映射為目前組建的計算屬性
computed:{
...mapState(['count'])
}
3.3 Mutation
Mutation 用于變更Store中的資料
- 隻能通過mutation變更store資料，不可以直接操作Store中的資料
- 通過這種方式雖然操作起來稍微繁瑣一些，但是可以集中監控所有資料的變化
// 定義 Mutation
const Store = new Vuex.Store({
state:{count:0},
mutations:{
add(state){
// 變更狀态
state.count++
}
}
})
//觸發 mutation
methods:{
handle(){
// 觸發mutation的第一種方式
this.$store.commit('add')
}
}
可以在觸發mutations時傳遞參數：
// 定義Mutation
const Store = new Vuex.Store({
state:{count:0},
mutations:{
add(state,step){
// 變更狀态
state.count+=step
}
}
})
//觸發 mutation
methods:{
handle(){
// 調用commit函數
// 觸發mutation時攜帶參數
this.$store.commit('add',3)
}
}
this.$store.commit()是觸發mutations的第一種方式，下面的這種方法是觸發mutations的第二種方式
// 1.從 vuex 中按需導入 mapMutations 函數
import { mapMutations } from 'vuex'
通過剛才導入的mapMutations函數，将需要的mutations函數，映射為目前元件的methods方法：
// 2.将指定的mutations函數，映射為目前元件的methods方法
methods:{
...mapMutations(['add','addN'])
}
3.4 Action
Action用于處理異步任務
如果通過一步操作變更資料，必須通過Action,而不能使用Mutation,但是在Action中還是要通過觸發Mutation的方式間接變更資料。
// 定義 Action
const store = new Vuex.Store({
// ...省略其他代碼
mutations:{
add(state){
state.count++
}
},
actions:{
addAsync(context){
setTimeout(() => {
context.commit('add')
},1000)
}
}
})
// 觸發 Action
methods:{
handle(){
// 觸發actions 的第一種方式
this.$store.dispatch('addAsync')
}
}
觸發actions異步任務時攜帶參數：
// 定義 Action
const store = new Vuex.Store({
// ...省略其他代碼
mutations:{
addN(state,step){
state.count+=step
}
},
actions:{
addNAsync(context,syep){
setTimeout(() => {
context.commit('addN',step)
},1000)
}
}
})
// 觸發 Action
methods:{
handle(){
// 在調用 dispatch 函數
// 觸發 actions 時攜帶參數
this.$store.dispatch('addNAsync',3)
}
}
this.$store.dispatch()是觸發actions的第一種方式，下面的這種方法是觸發actions的第二種方式
// 1.從 vuex 中按需導入 mapActions 函數
import { mapActions } from 'vuex'
通過剛才導入的mapActions函數，将需要的actions函數，映射為目前元件的methods方法：
// 2.将指定的actions函數，映射為目前元件的methods方法
methods:{
...mapActions(['addAsync','addNAsync'])
}
3.5 Getter
Getter用于對Store中的資料進行加工處理形成新的資料。
- Getter 可以對Store中已有的資料加工處理之後形成新的資料，類似于Vue的計算屬性
- Store中資料發生變化 ， Getter 的資料也會跟着變化
// 定義 Getter
const store = new Vuex.Store({
state:{
count : 0
},
getters:{
showNum:state => {
return '目前最新的數量是'+state.count
}
}
})
使用 getters 的第一種方式
this.$store.getters.名稱
使用 getters 的第二種方式
import { mapGetters } from 'vuex'
computed:{
...mapGetters(['showNum'])
}
3.6 module
當一個項目過于複雜需要共享的狀态過多時，store對象就會變得非常臃腫且不好管理，這時我們就可以使用vuex提供的将store分割成一個個module
首先在store檔案目錄下建立一個modules檔案夾，裡面就是管理狀态的js檔案，既然要把不同狀态分開，那就建立不同的檔案
此時store檔案夾下的index檔案就要改成如下所示：
預設情況下，子產品内部的action等是注冊在全局命名空間的，如果你希望你的檔案具有更高的封裝性和複用性，可以通過添加namespaced:true使其成為帶命名空間的子產品。
而我們如何在元件中使用帶有命名空間的子產品？
元件中使用：
computed:{
// 第一種寫法
...mapState('a',['msg'])
// 第二種寫法
...mapState('a',{
msg: state =>state.msg
})
}
methods:{
...mapMutations('a',['changeMsg'])
}