前言
在 vue.js 的專案中，如果專案結構簡單， 父子元件之間的資料傳遞可以使用 props 或者 $emit 等方式，詳細點選這篇文章檢視。
但是如果是大型專案，很多時候都需要在子元件之間傳遞資料，使用之前的方式就不太方便。vue 的狀態管理工具 vuex 完美的解決了這個問題。
一、安裝並引入 vuex
專案結構：
首先使用 npm 安裝 vuex?1
cnpm install vuex -s
然後在 main.js 中引入?1
2345
6789
1011
1213
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
2345
6789
1011
1213
import vue from'vue'
import vuex from'vuex'
vue.use(vuex)
const store =newvuex.store(
})
exportdefaultstore
這是乙個最簡單的 store.js，裡面只存放乙個狀態 author
雖然在 main.js 中已經引入了 vue 和 vuex，但是這裡還得再引入一次
三、將狀態對映到元件?1
2345
6789
1011
1213
1415
1617
1819
2021
2223
2425
2627
2829
3031
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
2345
methods:
}
在 setauthor 方法中，將輸入框的值 inputtxt 賦給 vuex 中的狀態 author，從而實現子元件之間的資料傳遞
五、官方推薦的修改狀態的方式
首先在 store.js 中定義乙個方法 newauthor，其中第乙個引數 state 就是 $store.state，第二個引數 msg 需要另外傳入
然後修改 header.vue 中的 setauthor 方法
這裡使用$store.commit提交 newauthor，並將this.inputtxt傳給 msg，從而修改 author
這樣顯式地提交(commit) mutations，可以讓我們更好的跟蹤每乙個狀態的變化，所以在大型專案中，更推薦使用第二種方法。
總結
您可能感興趣的文章:
SQLMap的入門教程
sqlmap是乙個自動化的sql注入工具，其主要功能是掃瞄 發現並利用給定url的sql注入漏洞，還可以檢測xss漏洞，內建了很多繞過的外掛程式，支援的資料庫有 mysql oracle postgresql sqlserver access db2 sqlite firebird sybase和s...
CSS入門教程
css是 cascading style sheets 的簡稱，中文翻譯為 串接樣式表 也有人翻譯為 樣式表 css用以作為網頁的排版和風格設計，在web標準建站中，對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足，讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...
CSS入門教程
css是 cascading style sheets 的簡稱，中文翻譯為 串接樣式表 也有人翻譯為 樣式表 css用以作為網頁的排版和風格設計，在web標準建站中，對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足，讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...