Vuex基本使用的總結

2021-08-22 00:15:25 字數 4390 閱讀 8929

vuex 背後的基本思想： 把元件的共享狀態抽取出來，以乙個全域性單例模式管理，在這種模式下，我們的元件樹構成了乙個巨大的「檢視」，不管在樹的哪個位置，任何元件都能獲取狀態或者觸發行為！

另外，通過定義和隔離狀態管理中的各種概念並強制遵守一定的規則，我們的**將會變得更結構化且易維護。

特點： 

vuex 的狀態儲存是響應式的。當 vue 元件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。

你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每乙個狀態的變化，從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用

在 vue 的單頁面應用中使用，需要使用vue.use(vuex)呼叫外掛程式。

使用非常簡單，只需要將其注入到vue根例項中。

import vuex from 'vuex'


vue.use(vuex)


const store = new vuex.store(,


getter: 


},mutations: 


},actions: }})


// 注入到根例項


new vue()複製**
然後改變狀態：

this.$store.commit('increment')複製**
vuex 主要有四部分：

state：包含了store中儲存的各個狀態。

getter: 類似於 vue 中的計算屬性，根據其他 getter 或 state 計算返回值。

mutation: 一組方法，是改變store中狀態的執行者。

action: 一組方法，其中可以含有非同步操作

vuex 使用state來儲存應用中需要共享的狀態。為了能讓 vue 元件在state更改後也隨著更改，需要基於state建立計算屬性。

const counter = }


`,  computed: 


}}複製**
類似於 vue 中的 計算屬性，可以在所以來的其他state或者getter改變後自動改變。

每個getter方法接受state和其他getters作為前兩個引數

getters: 


}複製**
前面兩個都是狀態值本身，mutations才是改變狀態的執行者。mutations用於同步地更改狀態

// ...


mutations: 


}複製**
其中，第乙個引數是state，後面的其他引數是發起mutation時傳入的引數。

this.$store.commit('increment', 10)複製**
commit方法的第乙個引數是要發起的mutation名稱，後面的引數均當做額外資料傳入mutation定義的方法中。

規範的發起mutation的方式如下：

store.commit()複製**
額外的引數會封裝進乙個物件，作為第二個引數傳入mutation定義的方法中。

mutations: 


}複製**
想要非同步地更改狀態,需要使用action。action並不直接改變state，而是發起mutation。

actions: ) , 1000)


}}複製**
發起action的方法形式和發起mutation一樣，只是換了個名字dispatch。

// 以物件形式分發


store.dispatch()複製**
想要使用action處理非同步工作很簡單，只需要將非同步操作放到action中執行（如上面**中的settimeout）。

要想在非同步操作完成後繼續進行相應的流程操作，有兩種方式:

action返回乙個promise。

而dispatch方法的本質也就是返回相應的action的執行結果。所以dispatch也返回乙個promise。

store.dispatch('actiona').then(() => )


複製**
利用async/await。**更加簡潔。

// 假設 getdata() 和 getotherdata() 返回的是 promise


actions: ) ,


async actionb () 


}複製**
將state和getter結合進元件需要使用計算屬性：

computed: 


}複製**
將mutation和action結合進元件需要在methods中呼叫this.$store.commit()或者this.$store.commit():

methods: ,


changedateasync () 


}複製**
為了簡便起見，vuex 提供了四個方法用來方便的將這些功能結合進元件。

mapstatemapgettersmapmutationsmapactions

示例**：

import  from 'vuex'


// ....


computed: ,


...mapstate(


}),...mapgetters(


})}methods: ),


...mapactions()


}複製**
如果結合進元件之後不想改變名字，可以直接使用陣列的方式。

methods: 複製**
可以將應用的store分割為小模組，每個模組也都擁有所有的東西:state,getters,mutations,actions。

首先建立子模組的檔案：

// initial state


const state = 


// getters


const getters = 


// actions


const actions = , products) 


}// mutations


const mutations = ) 


}export default 


複製**
然後在總模組中引入：

import vuex from 'vuex'


import products from './modules/products' //引入子模組


vue.use(vuex)


export default new vuex.store(


})複製**
其實還存在命名空間的概念，大型應用會使用。需要時檢視文件即可。vuex的基本使用大致如此。

參考

Vuex基本使用之總結

在 vue 的單頁面應用中使用，需要使用vue.use vuex 呼叫外掛程式。使用非常簡單，只需要將其注入到vue根例項中。import vuex from vuex vue.use vuex const store newvuex.store getter mutations actions 注...

vuex的基本使用

vuex的特點 1.多元件共享狀態 多個元件使用同乙個資料 2.任何乙個元件發生改變,其他元件也要跟著發生相應的變化 基本使用 安裝vuex npm install vuex 建立例項 import vuex from vuex import vue from vue vue.use vuex co...

vuex的基本使用

首先先建立乙個store.js 安裝vue,vuex什麼的就不說了 這是乙個倉庫 import vue from vue import vuex from vuex vue.use vuex 裝載資料的乙個倉庫 const state 修改倉庫的方法 const mutations reduce s...