在 vue.js 的專案中，如果專案結構簡單， 父子元件之間的資料傳遞可以使用 props 或者 $emit 等方式.
但是如果是大型專案，很多時候都需要在子元件之間傳遞資料，使用之前的方式就不太方便。vue 的狀態管理工具 vuex 完美的解決了這個問題。
一、安裝並引入 vuex
專案結構：
首先使用 npm 安裝 vuex
?
1
cnpminstallvuex -s
然後在 main.js 中引入
?
1
2
3
4
5
6
7
8
9
10
11
12
13
import vue from'vue'
import vuex from'vuex'
import store from'./vuex/store'
vue.use(vuex)
/* eslint-disable no-new */
newvue()
二、構建核心倉庫 store.js
vuex 應用的狀態 state 都應當存放在 store.js 裡面，vue 元件可以從 store.js 裡面獲取狀態，可以把 store 通俗的理解為乙個全域性變數的倉庫。
但是和單純的全域性變數又有一些區別，主要體現在當 store 中的狀態發生改變時，相應的 vue 元件也會得到高效更新。
在 src 目錄下建立乙個 vuex 目錄，將 store.js 放到 vuex 目錄下
?
1
2
3
4
5
6
7
8
9
10
11
12
13
import vue from'vue'
import vuex from'vuex'
vue.use(vuex)
const store =newvuex.store(
})
exportdefaultstore
這是乙個最簡單的 store.js，裡面只存放乙個狀態 author
雖然在 main.js 中已經引入了 vue 和 vuex，但是這裡還得再引入一次
三、將狀態對映到元件
?
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
這是 footer.vue 的 html 和 script 部分
主要在 computed 中，將 this.$store.state.author 的值返回給 html 中的 author
頁面渲染之後，就能獲取到 author 的值
四、在元件中修改狀態
然後在 header.vue 中新增乙個輸入框，將輸入框的值傳給 store.js 中的 author
這裡我使用了 element-ui 作為樣式框架
上面將輸入框 input 的值繫結為 inputtxt，然後在後面的按鈕 button 上繫結 click 事件，觸發 setauthor 方法
?
1
2
3
4
5
methods:
}
在 setauthor 方法中，將輸入框的值 inputtxt 賦給 vuex 中的狀態 author，從而實現子元件之間的資料傳遞
五、官方推薦的修改狀態的方式
上面的示例是在 setauthor 直接使用賦值的方式修改狀態 author，但是 vue 官方推薦使用下面的方法：
首先在 store.js 中定義乙個方法 newauthor，其中第乙個引數 state 就是 $store.state，第二個引數 msg 需要另外傳入
然後修改 header.vue 中的 setauthor 方法
這裡使用 $store.commit 提交 newauthor，並將 this.inputtxt 傳給 msg，從而修改 author
這樣顯式地提交(commit) mutations，可以讓我們更好的跟蹤每乙個狀態的變化，所以在大型專案中，更推薦使用第二種方法。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援指令碼之家。
VUE專案爬坑 4 vuex使用注意
1 修改資料mutations state中的資料，不能直接修改，如果想要修改，必須通過 mutations 2 獲取資料this.store.state.如果元件想要直接 從 state 上獲取資料 需要 this.store.state.3 this.store.commit 方法的名稱 唯一的...
vue爬坑 入門坑
問題1 父子頁面路由模組之間的呼叫 非資料互動 問題2 資料請求時跨域解決 用vue cli建立的專案，開發位址是localhost 3010，資料介面是localhost 8080。此時資料和開發環境不在相同網域名稱下，需要跨域才能請求到資料。解2 解決辦法有多種 服務端修改請求頭資訊允許跨域請求...
vue中學習使用Vuex詳解
在spa單頁面元件的開發中 vue的vuex和react的redux 都統稱為同一狀態管理，個人的理解是全域性狀態管理更合適 簡單的理解就是你在state中定義了乙個資料之後，你可以在所在專案中的任何乙個元件裡進行獲取 進行修改，並且你的修改可以得到全域性的響應變更。下面咱們一步一步地剖析下vuex...