vue當中組件之間共享數據的方式
- 父向子傳值：v-bind 屬性綁定
- 子向父傳值：v-on 事件綁定
- 兄弟組件之間共享數據：EventHBus
- $emit 發送數據的那個組件
- $on 接收數據的那個組件
上面介紹的這三種組件之間的通訊方式，只適合在小範圍內來進行數據的共享，如果我們要頻繁的、大範圍的實現數據的共享，以上三種方式就有點力不從心了
Vuex
vuex是實現組件全局狀態(數據)管理的一種機制，可以方便的實現組件之間的數據共享
使用vuex統一管理狀態的好處
- 能夠在 vuex 中集中管理共享的數據，易於開發和維護
- 能夠高效的實現組件之間的數據共享，提高開發效率
- 存儲在 vuex 中的數據都是響應式的，能夠實時保持數據與頁面的同步
一般情況下，只有組件之間共享的數據，纔有必要存儲到 vuex 中，對於組件中的私有數據，依舊存儲在組件自身的data中即可
vuex 的基本使用
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
})
vuex 中的主要核心概念
- 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'])
}
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')
}
}
在觸發 Mutation 時傳遞參數：
// 定義 Mutation
const store = new Vuex.Store({
state:{
count: 0
},
mutations:{
addN(state,step){
// 變更狀態
state.count += step
}
}
})
// 觸發mutation
methods:{
handle2(){
// 在調用 commit 函數，觸發 mutations 是攜帶參數
this.$store.commit('addN',6)
}
}
this.$store.commit() 是觸發 mutations 的第一種方式，觸發 mutations 的第二種方式：
//1. 從 vuex 中按需導入 mapMutations 函數
import { mapMutations } from 'vuex'
通過剛纔導入的 mapMutations 函數，將需要的 mutations 函數，映射爲當前組件的 methods 方法：
methods:{
...mapMutations(['add','addN']),
// 下面是在組件中的使用方法，此時映射的 add 和 addN 函數就相當於當前組件的方法，通過this調用即可
btnHandle1(){
this.add()
}
btnHandle2(){
this.addN()
}
}
Action
Action用來處理異步任務。
如果通過異步操作變更數據，必須通過 Action，而不能使用 Mutation ，但是 Action 中還是要通過觸發 Mutation 的方式間接變更數據
觸發 actions 的第一種方式是 通過 this.$store.dispatch('函數名稱')
觸發 actions 的第二種方式是 通過 按需導入 mapActions函數，通過導入的 mapActions 函數，將需要的 actions 函數，映射爲當前組件的 methods 方法即可
// 定義 Action
const store = new Vuex.Store({
state:{
count: 0
},
mutations:{
add(state){
state.count++
},
//攜帶參數的形式
addN(state,step){
state.count += step
}
},
actions:{
addAsync(context){
setTimeout(()=>{
context.commit('add')
},1000)
},
// actions 攜帶參數的形式
addAsyncN(context,step){
setTimeout(()=>{
context.commit('addN',step)
},1000)
}
}
})
// 觸發 Action
methods：{
handle(){
// 觸發 actions 的第一種方式
this.$store.dispatch('addAsync')
},
handle2(){
// 觸發 actions 時攜帶參數
this.$store.dispatch('addAsyncN',6 )
}
}
Getter
Getter 用於對 Store 中的數據進行加工處理形成新的數據
- Getter 可以對 Store 中已有的數據加工處理之後形成新的數據，類似 Vue 的計算屬性
- Store中的數據發生變化時，Getter的數據也會跟着發生變化
// 定義 getter
const store = new Vuex.Store({
state:{
count: 0
},
mutations:{},
Actions:{},
getters:{
showNum: state => {
return '當前最新的數量是【'+ state.count +'】'
}
}
})
使用 getters 的第一種方式：
this.$store.getters.名稱
使用 getters 的第二種方式：
import { mapGetters } from 'vuex'
computed:{
...mapGetters(['showNum'])
}