Vuex 簡單使用

安裝vuex

vuex官方文件

npm install vuex -s

vue中使用vuex

/store/index.js

import vue from
"vue"
;import vuex from
"vuex"
;vue.
use(vuex)
;const store=
newvuex.store(,
getters:
,	mutations:
,	actions:
,	modules:})
export
default store;

main.js

import vue from
'vue'
import store from
'./store/index.js'
vue.config.productiontip =
false
newvue()
.$mount
()

vuex的五個核心概念

公共狀態，vue例項的data一樣的，可以通過$store.state.*獲取到狀態

//  /store/index.js
state:
vuex:
}<
/h1>
...onmsg()

可以理解為公共的計算屬性，同樣和vue例項是一樣的效果

//  /store/index.js
state:
,getters:
}}<
/h1>

如果想要傳參進行計算，可以返回乙個函式

getters:
}}

我們在修改vuex管理的狀態時，需要commit提交乙個mutations來修改狀態，不要直接修改，當然不是不可以，而是為了方便管理。

vue官方專門開發了乙個工具devtools，它的作用就是監控通過commit提交乙個mutations來修改狀態的記錄。這樣在資料龐大、複雜時，可維護性更加高

//  /store/index.js
state:
,mutations:},
increment()

mutations 主要處理的是同步操作，而actions就是進行非同步操作的，可以在這一發起ajax請求獲取資料

通過 dispatch 來觸發乙個 action

//  /store/index.js
state:
,increment()
,actions:
,2000)}
},synsincrement()

actions中的方法形參context的屬性：

commit: 觸發mutations

dispatch: 觸發另乙個action

getters: 計算屬性

state: 狀態

將 store 分割成模組，每個模組擁有自己的 state、mutation、action、getter、甚至是巢狀子模組——從上至下進行同樣方式的分割

//  /store/index.js
const modulea=),
getters:
,	mutations:},
actions:
,2000)}
},modules:},
const store=
newvuex.store(}
)

使用模組中的狀態

>
}h1>

觸發模組中的mutation、action、getters

this
.$store.
commit
("aincrement"
)this
.$store.
dispatch
("synsincrementa");
modulenum:
}<
/h1>

注意：因為觸發mutation、action不用跟模組名，所以注意命名衝突

ps:2023年8月20日筆記

vuex簡單使用

當我們想要從乙個元件傳遞乙個引數到另外乙個元件的時候，這兩個元件不是父子元件，也不是兄弟元件，這樣我們就可以用vuex 乙個集中存貯資料的公共倉庫我覺得官網用於計算變數的在實際中並不是很常用，通常使用vuex就是儲存一些變數，比如我在登入的時候獲取到使用者名稱，要展示在內頁裡，我就會把這個使用者名...

vuex 簡單使用

export default new vuex.store mutations actions 解構 context物件，context與store例項具有相同的屬性和方法。這裡commit 就是 store.commit getlists 元件內使用 created 一般都在 computed 獲...

vuex的簡單使用

使用了 vue lic腳手架我不說得很理論，我就說得很通俗在store檔案下面寫成 index.js是載入全部下面是 modules檔案下的wallet.js export default getters mutations actions src 這是index.js import vue ...

Vuex 簡單使用

vuex簡單使用

vuex 簡單使用

vuex的簡單使用

相關推薦