vue狀態管理vuex

2021-08-22 18:11:19 字數 1916 閱讀 3406

const store = new vuex.store(

,

mutations:,

changeasync:function(state,a)

}, getters:

}, actions:,1000)}}

})

解讀

獲取:this.sto

re.s

tate

.nam

e;th

is.store.state.name;this.

store.

stat

e.na

me;t

his.

store.getters.getage

修改:this.sto

re.c

ommi

t(′c

hang

e′,10

);th

is.store.commit('change',10);this.

store.

comm

it(′

chan

ge′,

10);

this

.store.dispatch(『add』, 5);

四個主要屬性:state;mutations;getters;actions

state

儲存元件之間共享資訊

直接獲取:this.$store.state.name

mutations

顯示的更改state裡的資料

修改state資訊提交:this.$store.commit(『change』,10)

原理:呼叫commit方法給mutations中的方法傳值

mutations中的方法預設接受兩個值乙個state,乙個commit傳進來的值

getters

獲取state裡的資料

獲取需要的存在state的資訊this.$store.getters.getage

actions

非同步提交:action中的函式作用是呼叫mutations中的函式提交修改資料

原理:外部出發action中函式,action中函式觸發mutations中函式修改

例如:外部出發action中的函式:this.$store.dispatch(『add』, 5);

觸發action中的add,action中的add觸發mutations中的changeasync

專案中使用建立vuex倉庫store/index.js

入口main.js

修改獲取資料

獲取資料

獲取方式2

vue狀態管理vuex

vuex就是提供乙個倉庫,store倉庫裡面放了很多物件。其中state就是資料來源存放地,對應於與一般vue物件裡面的data 後面講到的actions和mutations對應於methods 在使用vuex的時候通常會建立store例項new vuex.store 有很多子模組的時候還會使用到m...

vue複習(vuex狀態管理)

啟用倉庫 頁面中呼叫倉庫中是資料 vue專案中 簡寫 補充 沒有簡寫的用法 不推薦 建立檔案store index.js 建立倉庫 import vue from vue import vuex from vuex 匯入各個模組的小倉庫 import goods from models goods ...

vue中配置vuex狀態管理

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