一、基本用法
1. 初始化並創建一個項目
|
1
2
3
|
vue init webpack-simple vuex-demo
cd vuex-demo
npm install
|
2. 安裝 vuex
|
1
|
npm
install
vuex -S
|
3. 在 src 目錄下創建 store.js 文件，並在 main.js 文件中導入並配置
store.js 中寫入
|
1
2
3
4
|
import Vue from
'vue'
//引入 vuex 並 use
import Vuex from
'vuex'
Vue.use(Vuex)
|
main.js 文件
|
1
2
3
4
5
6
7
8
9
10
|
import Vue from
'vue'
import App from
'./App.vue'
import store from
'./assets/store'
//導入 store 對象
new
Vue({
//配置 store 選項，指定為 store 對象，會自動將 store 對象注入到所有子組件中，在子組件中通過 this.$store 訪問該 store 對象
store,
el:
'#app'
,
render: h => h(App)
})
|
4. 編輯 store.js 文件
在應用 vuex 之前，我們還是需要看懂這個流程圖，其實很簡單。
vuex
① Vue Components 是我們的 vue 組件，組件會觸發（dispatch）一些事件或動作，也就是圖中的 Actions；
② 我們在組件中發出的動作，肯定是想獲取或者改變數據的，但是在 vuex 中，數據是集中管理的，我們不能直接去更改數據，所以會把這個動作提交（Commit）到 Mutations 中；
③ 然后 Mutations 就去改變（Mutate）State 中的數據；
④ 當 State 中的數據被改變之后，就會重新渲染（Render）到 Vue Components 中去，組件展示更新后的數據，完成一個流程。
Vuex 的核心是 Store（倉庫），相當於是一個容器，一個 Store 實例中包含以下屬性的方法：
state 定義屬性（狀態 、數據）
store.js 中寫入
|
1
2
3
4
5
6
7
8
9
10
11
|
// 定義屬性（數據）
var
state = {
count:6
}
// 創建 store 對象
const store =
new
Vuex.Store({
state
})
// 導出 store 對象
export
default
store;
|
方式1、 在 app.vue 中就能通過 this.$store 訪問該 store 對象 ，獲取該 count 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<template>
<div id=
"app"
>
//把 count 方法直接寫入，可自己執行
<h1>{{count}}</h1>
</div>
</template>
<script>
export
default
{
name:
'app'
,
computed:{
count(){
//返回獲取到的數據
return
this
.$store.state.count
}
}
}
</script>
|
方式2、vuex 提供的 mapGetters 和 mapActions 來訪問
mapGetters 用來獲取屬性（數據）
① 在 app.vue 中引入 mapGetters
|
1
|
import {mapGetters} from
'vuex'
|
② 在 app.vue 文件的計算屬性中調用 mapGetters 輔助方法，並傳入一個數組，在數組中指定要獲取的屬性 count
|
1
2
3
4
5
6
7
8
9
10
|
<script>
import {mapGetters,mapActions} from
'vuex'
export
default
{
name:
'app'
,
computed:mapGetters([
//此處的 count 與以下 store.js 文件中 getters 內的 count 相對應
'count'
])
}
</script>
|
③ 在 store.js 中定義 getters 方法並導出
getters 用來獲取屬性
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
import Vue from
'vue'
import Vuex from
'vuex'
Vue.use(Vuex)
// 定義屬性（數據）
var
state = {
count:6
}
// 定義 getters
var
getters={
//需要傳個形參，用來獲取 state 屬性
count(state){
return
state.count
}
}
// 創建 store 對象
const store =
new
Vuex.Store({
state,
getters
})
// 導出 store 對象
export
default
store;
|
這樣頁面上就會顯示傳過來的數據了！接下來我們來通過動作改變獲取到的數據
④在 store.js 中定義 actions 和 mutations 方法並導出
actions 定義方法（動作）,可以使異步的發送請求。
commit 提交變化，修改數據的唯一方式就是顯示的提交 mutations
mutations 定義變化，處理狀態（數據）的改變
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
import Vue from
'vue'
import Vuex from
'vuex'
Vue.use(Vuex)
// 定義屬性（數據）
var
state = {
count:6
}
// 定義 getters
var
getters={
count(state){
return
state.count
}
}
// 定義 actions ，要執行的動作，如流程的判斷、異步請求
const actions ={
// ({commit,state}) 這種寫法是 es6 中的對象解構
increment({commit,state}){
//提交一個名為 increment 的變化，名字可自定義，可以認為是類型名，與下方 mutations 中的 increment 對應
//commit 提交變化，修改數據的唯一方式就是顯式的提交 mutations
commit(
'increment'
)
}
}
// 定義 mutations ，處理狀態（數據） 的改變
const mutations ={
//與上方 commit 中的 ‘increment' 相對應
increment(state){
state.count ++;
}
}
// 創建 store 對象
const store =
new
Vuex.Store({
state,
getters,
actions,
mutations
})
// 導出 store 對象
export
default
store;
|
⑤ 在 app.vue 中引入 mapActions ，並調用
mapActions 用來獲取方法（動作）
|
1
|
import {mapGetters,mapActions} from
'vuex'
|
調用 mapActions 輔助方法，並傳入一個數組，在數組中指定要獲取的方法 increment
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<template>
<div id=
"app"
>
//這個 increment 方法與下面 methods 中的 increment 相對應
<button @click=
"increment"
>增加</button>
<button>減少</button>
<h1>{{count}}</h1>
</div>
</template>
<script>
import {mapGetters,mapActions} from
'vuex'
export
default
{
name:
'app'
,
computed:mapGetters([
'count'
]),
methods:mapActions([
//該 increment 來自 store.js 中導出的 actions 和 mutations 中的 increment
'increment'
,
])
}
</script>
|
這樣就能通過 button 來改變獲取到的 count 了。
看起來確實是挺繞的，需要在理解了原理的情況下，再細細琢磨，加深理解。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
原文鏈接：https://www.jianshu.com/p/b014ff74bdb6
/*getter是state的get方法，沒有get頁面就獲取不到數據
獲取頁面:
import {mapGetters,mapActions} from 'vuex'
<h1>{{count}}</h1>
computed:mapGetters([
'count'
]),
store.js:
var state = {
count:6
},
var getters={
count(state){
return state.count
}
}
改變數據頁面：
<button @click="increment">增加</button>
methods:mapActions([
//該 increment 來自 store.js 中導出的 actions 和 mutations 中的 increment
'increment',
])
先發給action:
const actions ={
// ({commit,state}) 這種寫法是 es6 中的對象解構
increment({commit,state}){
//提交一個名為 increment 的變化，名字可自定義，可以認為是類型名，與下方 mutations 中的 increment 對應
//commit 提交變化，修改數據的唯一方式就是顯式的提交 mutations
commit('increment')
}
}
再發給mutations:
const mutations ={
//與上方 commit 中的 ‘increment' 相對應
increment(state){
state.count ++;
}
}
*/