Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理工具。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
一、Vue組件傳值的方式
- 父向子組件傳值：父組件v-bind（縮寫：）屬性綁定，子組件props接收
- 子向父組件傳值：子組件$emit觸發(fā)，父組件v-on（縮寫@）事件綁定
- 兄弟組件之間數(shù)據(jù)共享：EventBus
二、關(guān)于Vuex
Vuex是適用于在Vue項目開發(fā)時使用的狀態(tài)管理工具。如果一個項目開發(fā)中頻繁的使用組件傳參的方式來同步data的值，一旦項目變得很龐大，管理和維護(hù)這些值將是非常復(fù)雜的工作。Vue為這些被多個組件頻繁使用的值提供了一個統(tǒng)一管理的工具——Vuex。在項目中，我們只需把這些值定義在Vuex中，就可以在Vue項目的組件中使用。
三、Vuex的安裝
1.下載vuex: npm install vuex --save
2.在項目根目錄下新建一個store文件夾，在文件夾內(nèi)新建index.js,初始化Vuex:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {count: 1000}
})
export default store;
3.將store掛載到vue實例中，在main.js中添加：
import Vue from 'vue';
import store from './store/index'
import App from './App.vue';
import router from './router';
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
4.在組件中使用vuex
（1）將state中定義的count拿來在h1標(biāo)簽中顯示：
<template>
<div id='app'>
<h1>{{ $store.state.count}}</h1>
</div>
</template>
（2）或者要在組件方法中使用：
created() {
console.log(this.$store.state.count) // 打印出1000
}
四、Vuex的核心概念
4.1 核心概念的描述
- State：存儲應(yīng)用狀態(tài)數(shù)據(jù)的對象，與vue中data類似
- Getters：類似vue的計算屬性，store中數(shù)據(jù)的變化，getters的數(shù)據(jù)也會發(fā)生變化
- Mutations： 提交mutation來修改store中的狀態(tài)，同步操作
- Actions：與mutations類似，提交修改state的行為，處理異步任務(wù)（提交的是mutation，不是直接修改狀態(tài)）
- Modules： 模塊化狀態(tài)管理，為了開發(fā)大型項目，方便狀態(tài)管理而使用的
4.2 工作流程
image.png
- 首先，vue組件調(diào)用某個Vuex的方法過程中需要向后端請求時或者出現(xiàn)異步操作時，需要dispatch Vue中的actions方法，以保證數(shù)據(jù)的同步。actions的存在是為了讓mutations中的方法能在異步操作中起作用。
- 如果沒有異步操作，我們可以直接在組件內(nèi)提交狀態(tài)中的mutations里自己編寫的方法來完成對state成員的操作。不建議在組件中對state直接進(jìn)行操作（如：ths.$store.count = 1）。這樣的話不能被VueDevtools所監(jiān)控到。
- 最后被修改后的state成員會被渲染到組件的原位置當(dāng)中去。
4.2.1 mutations
（1）定義mutations
const store = new Vuex.Store({
state: {
count: 1000
},
mutations: {
add(state,step){
// 變更狀態(tài)
state.count += step;
}
}
})
export default store;
（2）觸發(fā)mutations
methods: {
changeEvent() {
// 觸發(fā)mutations，可以通過mutations傳遞參數(shù)
this.$store.commit('add',5);
}
}
點擊按鈕如下：
image.png
4.2.2 actions
用于處理異步任務(wù)。
（1）定義actions
const store = new Vuex.Store({
state: {
count: 1000
},
mutations: {
// 只有 mutations 中定義的函數(shù)，才有權(quán)利修噶 state 中的數(shù)據(jù)
add(state,step){
// 變更狀態(tài)
state.count += step;
}
},
actions: {
addAsync(context,step) {
setTimeout(() => {
context.commit('add',step)
},3000)
}
}
})
export default store;
（2）觸發(fā)actions
this.$store.dispatch('addAsync',5);
點擊異步按鈕延時數(shù)據(jù)才會變化：
image.png
4.2.3 getters
Getter 用于對 Store 中的數(shù)據(jù)進(jìn)行加工處理形成的新的數(shù)據(jù)。
- Getter類似vue的計算屬性
- Store中數(shù)據(jù)的變化，Getter的數(shù)據(jù)也會發(fā)生變化
(1）定義getters
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 1000
},
mutations: {
// 只有 mutations 中定義的函數(shù)，才有權(quán)利修噶 state 中的數(shù)據(jù)
add(state,step){
// 變更狀態(tài)
state.count += step;
// 不要在mutations函數(shù)里，執(zhí)行異步代碼
// setTimeout(() => {
// state.count++
// }, 3000)
}
},
actions: {
addAsync(context,step) {
setTimeout(() => {
context.commit('add',step)
},3000)
}
},
getters: {
showNum: state => {
return `當(dāng)前的新數(shù)據(jù)是【${state.count}】`
}
}
})
export default store;
（2）使用getters
<template>
<div class="content">
<img alt="Vue logo" src="../assets/logo.png">
<div>當(dāng)前最新count值：{{$store.state.count}}</div>
<div>getters: {{$store.getters.showNum}}</div>
<button @click="changeEvent1">觸發(fā)同步按鈕</button>
<button @click="changeEvent2">觸發(fā)異步按鈕</button>
</div>
</template>
<script>
export default {
name: 'Content',
methods: {
// 觸發(fā)mutations，可以通過mutations傳遞參數(shù)
changeEvent1(){
this.$store.commit('add',5);
},
// 調(diào)用dispatch觸發(fā)actions時攜帶參數(shù)
changeEvent2() {
this.$store.dispatch('addAsync',5);
},
}
}
</script>
頁面顯示：
image.png
