在 vue 的單頁面應用中使用，需要使用vue.use(vuex)呼叫外掛程式。
使用非常簡單，只需要將其注入到vue根例項中。
import vuex from
'vuex'
vue.
use(vuex)
const store =
newvuex.store(,
getter:},
mutations:},
actions:}}
)// 注入到根例項
newvue
()
this
.$store.
commit
('increment'
)
getter: 類似於 vue 中的計算屬性，根據其他 getter 或 state 計算返回值。
mutation: 一組方法，是改變store中狀態的執行者。
action: 一組方法，其中可以含有非同步操作。
vuex 使用 state來儲存應用中需要共享的狀態。為了能讓 vue 元件在 state更改後也隨著更改，需要基於state建立計算屬性。
const counter =}`
, computed:
}}
每個getter方法接受 state和其他getters作為前兩個引數。
getters:
}
// ...
mutations:
}
this
.$store.
commit
('increment',10
)
規範的發起mutation的方式如下：
store.
commit
()
mutations:
}
actions:),
1000)}
}
// 以物件形式分發
store.
dispatch
()
要想在非同步操作完成後繼續進行相應的流程操作，有兩種方式:
action返回乙個 promise。
而dispatch方法的本質也就是返回相應的action的執行結果。所以dispatch也返回乙個promise。
store.
dispatch
('actiona').
then((
)=>
)
// 假設 getdata() 和 getotherdata() 返回的是 promise
actions:),
async
actionb()
}
computed:
}
re.c
ommi
t()或
者thi
s.
store.commit()或者this.
store.
comm
it()
或者th
is.store.commit():
methods:
,changedateasync()
}
mapstate
mapgetters
mapmutations
mapactions
示例**：
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
newvuex.store(}
)
Vuex基本使用的總結
vuex 背後的基本思想 把元件的共享狀態抽取出來，以乙個全域性單例模式管理，在這種模式下，我們的元件樹構成了乙個巨大的 檢視 不管在樹的哪個位置，任何元件都能獲取狀態或者觸發行為！另外，通過定義和隔離狀態管理中的各種概念並強制遵守一定的規則，我們的 將會變得更結構化且易維護。特點 vuex 的狀態...
vuex基本使用
使用vuex 1.安裝vuex，搭建手腳架 npm i vuex s2.建立乙個store資料夾，在該資料夾中建立乙個index.js檔案 2.1引入相應的檔案 import vue from vue import vuex from vuex 2.2使用vuex vue.use vuex 3.建立...
vuex基本使用
1.首先要在store index.js檔案配置vuex vuex基本有state 用來定義共享狀態，actions 實現非同步請求操作，mutations 存放了所有更改狀態的方法，getters 類似於計算屬性，根據vuex的state狀態派發乙個新的狀態出來.自己封裝的ajax請求 vue.u...