一.使用前需要做的事情
1.理解什麼是vuex？
學習到vue之後最常見的就是使用父子元件傳值的問題，但是當我們在進行乙個較大型的新專案開發時候，元件關係較為複雜如果還堅持使用父子元件的話將會異常繁瑣，再加上有些資料需要幾個元件同時共享，所以這時候我們採用了vuex（vue狀態管理模式)。
2.安裝vuex外掛程式
npm i vuex -s
二.使用vuex
1.1）建立store檔案
2）index.js檔案
import vue from
'vue'
import vuex from
'vuex'
//掛載vuex
vue.
use(vuex)
//建立vuex物件
const store =
newvuex.store(}
)export
default store
2. mutations使用方法
mutation方法是用於，加工this.sto
re.s
tate
當中的屬
性的，例
子中後面
帶了st
ate與
payl
oad的
引數，第
乙個引數
是指vu
ex例項
中的st
ate對
象部分，
payl
oad代
表需要傳
入的引數
，可以是
物件,要
想該元件
對vue
x取得的
值進行加
工可以通
過呼叫t
his.
store.state當中的屬性的，例子中後面帶了state與payload的引數，第乙個引數是指vuex例項中的state物件部分，payload代表需要傳入的引數，可以是物件,要想該元件對vuex取得的值進行加工可以通過呼叫this.
store.
stat
e當中的
屬性的，
例子中後
面帶了s
tate
與pay
load
的引數，
第乙個參
數是指v
uex實
例中的s
tate
物件部分
，pay
load
代表需要
傳入的參
數，可以
是物件,
要想該組
件對vu
ex取得
的值進行
加工可以
通過呼叫
this
.store.commit(『方法名』,『傳入引數』)，注意mutation只能夠進行同步操作，如需非同步操作需要操作actions。
3.刪除state中成員
新增：vue.
set(state,
"number",8
)刪除：
vue.
delete
(state,
"number"
)
getters作用在於進行加工取到的引數，並輸出。
actions中的方法有兩個預設引數
1.context 上下文(相當於箭頭函式中的this)物件
2.payload 掛載引數在這裡插入描述
使用vuex外掛程式方法
1.元件訪問state中資料的第一種方法 1 從vuex中按需引入mapstate函式 import from vuex 2 將全域性資料對映為當前元件computed計算屬性 computed 元件訪問state中資料的第二種方法 this.store.state.count 2.只能通過muta...
如何使用Vuex
vuex是什麼？vuex是適用於在vue專案開發時使用的狀態管理工具。安裝vuex cnpm i vuex s在專案的根目錄下新增乙個store資料夾，在該資料夾內建立index.js 初始化store下index.js中的內容 import vue from vue import vuex fro...
模擬Vuex外掛程式
需求 vuex是乙個幫助我們集中管理vue元件狀態的狀態管理外掛程式，我們將模擬它的state mutation action getter。在元件內，我們可以通過vm.sto re.c ommi t 來 更改st ate，或者使用 vm store.commit 來更改state，或者使用vm.s...