vue中的狀態管理 vuex store

2021-10-07 02:23:16 字數 1972 閱讀 6888

vuex store 是響應式的,當vue元件從store中讀取狀態(state)時,若store中的狀態發生更新時,會及時的響應給其他的元件。

store 中的四個核心選項:state mutation  getters  actions

1)state是用來存放元件之間共享的資料,一般會在元件的計算屬性中獲取state的資料。

使用:this.$store.state.  ...

2)  在 vuex store 中,實際改變 狀態(state) 的唯一方式是通過提交(commit) 乙個 mutation。

在元件裡提交:this.$store.commit('change',payload)

mutations下的函式接收state作為引數,接收乙個叫做payload(載荷)的東西作為第二個引數,這個東東是用來記錄開發者使用該函式的一些資訊,比如說提交了什麼,提交的東西是用來幹什麼的,包含多個字段,所以載荷一般是物件

還有一點需要注意:mutations方法必須是同步方法

var mystore =  new vuex.store(,

mutations:

},});

vue.component('hello',} 年齡:} 次數:}

", computed: ,

age(),

num()

},mounted(),

methods:

},data()

}})

3)getters

getters可以看成是store的計算屬性。

getters下的函式接收state作為第乙個引數。getters可以過濾元件中的資料,過濾的資料會存放到$store.getters物件中。

4)actions

actions:類似於mutation ,但是mutations只能處理同步函式,而actions則是可以處理任何的非同步操作 

actions和mutations的區別:

1.actions 提交的是 mutations,而不是直接變更狀態。也就是說,actions會通過mutations,讓mutations幫他提交資料的變更。

2.action 可以包含任意非同步操作。

this.$store.dispatch('add', 5);

執行時會觸發actions裡面的方法,和commit的用法相同。

action的大致用法:

1. 在actions選項裡新增非同步函式並提交到對應的函式(在mutation選項裡)中

context.commit('changeasync',value);

actions:,1000)

}}

2. 在元件裡:將dispatch「指向」actions選項裡的函式

changenumansyc:function()
3. 在mutations選項裡,要有對應的函式

changeasync:function(state,a)

Vue狀態管理

一 vuex是什麼 二 使用 單向資料流 state const state 使用 this store.state.uid this store.state.nickname getters const getters mutations 不推薦使用 mutations const mutatio...

vue中的狀態管理應用

vue.js官網中生態系統中給我們提供乙個官方的外掛程式vuex,利用這個外掛程式我們可以集中式管理資料,一處修改,多處應用,多個元件依賴同一狀態。主要應用於開發中大型專案。首先 npm i vuex s 引入外掛程式import vuex from vuex vuex是個物件,相關成員如下 成員用...

vue中配置vuex狀態管理

前言 文件 文件 文件 這個比較詳細 使用方式 第一步 建立store test.js 第一步 引入vue 和vuex 固定寫法 import vue from vue import vuex from vuex vue.use vuex 第二步 宣告vuex 的五個屬性,其中state,mutat...