溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在用vue作為前端框架進行開發的時候，對于組件間的傳值你一定不會陌生，如果只是簡單的父子組件傳值，我想你肯定不會選擇用Vuex來進行狀態管理，但是如果你需要構建一個中大型單頁應用，組件間數據交互比較復雜頻繁，你很可能會考慮如何更好地在組件外部管理狀態，那么Vuex 將會成為自然而然的選擇。
Vuex 是什么？
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。 這是官方的一種說法。
用個人的話總結下： Vuex就是為了實現多組件數據共享，從而建立一個叫store的數據管理庫，將需要共享的數據存放在里面，在需要的地方可以取出來作為初始數據，也可以在組件內通過dispatch或者提交commit方法來改變該原始數據狀態，從而實現的data的共享。
Vuex的核心
1、 State
Vuex中的數據源，我們需要保存的數據就保存在這里，可以在頁面通過this.$store.state來獲取我們定義的數據。
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
number: 0
}
export default new Vuex.Store({
state,
});
在頁面中通過this.$store.state.number 即可獲取到當前的值。
2、Getter
Vuex 允許我們在 store 中定義“getter”（可以認為是 store 的計算屬性）。就像計算屬性一樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。
Getter 接受 state 作為其第一個參數：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = {
number: 0
}
const getters = {
getNumber(state) {
return state.number + 1
}
}
export default new Vuex.Store({
state,
getters,
});
在頁面你可以用兩種方式取到getters里面的值
1、通過屬性訪問
Getter 會暴露為 store.getters 對象，你可以以屬性的形式訪問這些值 如： this.$store.getters.getNumber
Getter 也可以接受其他 getter 作為第二個參數：
const state = {
number: 1
}
const getters = {
getNumber(state) {
return state.number + 1 // 2
},
getDoubNUmber(state, getters) {
return state.number + getters.getNumber // 3
}
}
注意: getter 在通過屬性訪問時是作為 Vue 的響應式系統的一部分緩存其中的。
2、 通過方法訪問
你也可以通過讓 getter 返回一個函數，來實現給 getter 傳參。在你對 store 里的數組進行查詢時非常有用。
const state = {
number: 1,
list: [1, 2, 3, 4, 5]
}
const getters = {
getNumber(state) {
return state.number + 1 // 2
},
getDoubNumber(state, getters) {
return state.number + getters.getNumber // 3
},
filterNumber:(state)=>(num)=> {
return state.list.find(item=> item%num === 0)
}
}
export default new Vuex.Store({
state,
getters,
});
注意， getter 在通過方法訪問時，每次都會去進行調用，而不會緩存結果 this.$store.getters.filterNumber(3)
3、Mutation
更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是我們實際進行狀態更改的地方， 并且它會接受 state 作為第一個參數 , 提交載荷（payload) 作為額外的參數 ，并且在大多數情況下，載荷應該是一個對象，這樣可以包含多個字段并且使記錄的 mutation 會更易讀：
你可以這樣寫：
const mutations = {
increment(state, n) {
state.number += n
}
}
但你不能直接調用一個 mutation handler。這個選項更像是事件注冊：“當觸發一個類型為 increment 的 mutation 時，調用此函數。”要喚醒一個 mutation handler，你需要以相應的 type 調用 store.commit 方法：
this.$store.commit('increment', 1)
也可以這樣寫：
const mutations = {
increment(state, payload) {
state.number += payload.count
}
}
然后：
使用 this.$store.commit('increment', {count: 1}) 提交，
// 或者另一種方式是直接使用包含 type 屬性的對象進行提交：
this.$store.commit({
type: 'increment',
count: 1
})
特別說明：在 Vuex 中，mutation 都是同步任務：為了處理異步操作，讓我們來看一看 Action。
4、 Action
Action 類似于 mutation，不同在于：
1、Action 提交的是 mutation，而不是直接變更狀態。
2、Action 可以包含任意異步操作。
雖然在頁面中通過提交commit是可以達到修改store中狀態值的目的，但是官方并不建議我們這樣做，而是讓我們去提交一個action，在action中提交mutation再去修改狀態值。
const mutations = {
increment(state) {
state.number += 1
}
}
const actions = {
addNumber(context){
context.commit('increment')
}
}
Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation，或者通過 context.state 和 context.getters 來獲取 state 和 getters
addNumber( {commit} ){
commit('increment')
}
以上這種寫法等同于：
addNumber(context){
context.commit('increment')
}
Action 通過 store.dispatch 方法觸發：
this.$store.dispatch('addNumber')
同mutation 一樣你也可以在action的時候傳遞參數
const mutations = {
increment(state, number) {
state.number += number
}
}
const actions = {
addNumber(context, number){
context.commit('increment', number)
}
或者：
addNumber( {commit}, number){
commit('increment', number)
}
}
觸發方法： this.$store.dispatch('addNumber', 10)
關于在action 處理異步操作可以看下面這個例子：
const actions = {
getData({commit}) {
return new Promise((resolve, reject)=> {
setTimeout(()=>{
commit('getList')
resolve()
}, 1000)
})
}
}
然后再
this.$store.dispatch('getData').then(() => {
// ...
})
完整 實例：
import Vue from "vue";
import Vuex from "vuex";
import { resolve, reject } from "any-promise";
Vue.use(Vuex);
const state = {
number: 1,
list: [1, 2, 3, 4, 5]
}
const getters = {
getNumber(state) {
return state.number + 1 // 2
},
getDoubNumber(state, getters) {
return state.number + getters.getNumber // 3
},
filterNumber:(state)=>(num)=> {
return state.list.find(item=> item%num === 0)
}
}
const mutations = {
increment(state, n) {
state.number += n
},
getList(state) {
state.list = state.list.forEach((item)=> item*2)
}
}
const actions = {
addNumber( {commit} , n){
commit('increment', n)
},
getData({commit}) {
return new Promise((resolve, reject)=> {
setTimeout(()=>{
commit('getList')
resolve()
}, 1000)
})
}
}
export default new Vuex.Store({
state,
getters,
mutations,
actions
});
關于 Vuex中mapState、mapGetters、mapMutations、mapActions的用法
要用 首先得引入：
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
這玩意兒其實就是Vuex 內置的輔助函數，方便我們獲取store里面的數據和方法
computed: {
...mapState([
'number'
])
}
// 使用對象展開運算符將 getter 混入 computed 對象中
computed: {
...mapGetters([
'getNumber',
'getDoubNumber',
// ...
])
}
methods: {
...mapMutations([
'increment', // 將 `this.increment()` 映射為 `this.$store.commit('increment')`
...mapMutations({
add: 'increment' // 將 `this.add()` 映射為 `this.$store.commit('increment')`
})
}
methods: {
...mapActions([
'addNumber', // 將 `this.addNumber()` 映射為 `this.$store.dispatch('addNumber')`
// `mapActions` 也支持載荷：
'addNumber' // 將 `this.addNumber(amount)` 映射為 `this.$store.dispatch('addNumber', amount)`
]),
...mapActions({
requestData: 'getData' // 將 `this.requestData()` 映射為 `this.$store.dispatch('getData')`
})
}
以上是對Vuex實現狀態管理的一個整個過程的理解，參考官方文檔，然后自己寫一遍，比較容易明白其中的道理，后面有時間想寫React里面關于Redux實現狀態管理的一個過程，對比其中，其實他們思想差不多， 只不過redux實現過程更多點，敬請期待！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
