在 Vue.js 的專案中，如果專案結構簡單， 父子元件之間的資料傳遞可以使用 props 或者 $emit 等方式，大家參考一下我之前寫的 vue升級之路（二）-- vue元件間方法呼叫及資料傳輸
但是如果是大一點的專案或者需要在子元件之間頻繁傳遞資料的時，前面使用的方式就不太方便。而Vue 的狀態管理工具 Vuex 的出現就是為了解決這個問題。
一、安裝並且引入vuex
首先使用 npm 安裝 Vuex
npm install vuex -S
複製程式碼然後在main.js 引入
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './vuex/store'
Vue.use(Vuex)
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
複製程式碼專案結構：
二、構建核心倉庫 store.js
每一個 Vuex 應用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含著你的應用中大部分的狀態 (state)，所以可以把 store 通俗的理解為一個全域性變數的倉庫。 但是和單純的全域性變數又有一些區別，主要體現在當 store 中的狀態發生改變時，相應的 vue 元件也會得到高效更新。
在 src 目錄下建立一個 vuex 目錄，將 store.js 放到 vuex 目錄下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 定義所需的狀態
state: {
name: 'tree',
}
})
export default store
複製程式碼這是一個最簡單的 store.js，裡面只存放一個狀態 name 雖然在 main.js 中已經引入了 Vue 和 Vuex，但是這裡還得再引入一次
三、將狀態對映到元件
<template>
<div id="user">
<ul class="ul">
<li v-for="item in list">{{item.text}}</li>
</ul>
<div>歡迎來到Vue.js，<span class="name">{{ name }}</span></div>
</div>
</template>
<script>
export default {
name: 'user',
data() {
return {
list: [{
text: '發現'
}, {
text: '視訊'
}, {
text: '我的'
}, {
text: '朋友'
}, {
text: '帳號'
}]
}
},
computed: {
name () {
return this.$store.state.name
}
}
}
</script>
</script>
複製程式碼這是 user.vue 的 html 和 script 部分 主要在 computed 中，將 this.$store.state.name的值返回給 html 中的 name 頁面渲染之後，就能獲取到 name的值
四、在元件中修改狀態
然後在 login.vue 中新增一個輸入框，將輸入框的值傳給 store.js 中的 name
<template>
<div id="login">
<input type="text" name="" v-model="text" placeholder="輸入使用者名稱">
<button @click="login">login</button>
</div>
</template>
複製程式碼上面將輸入框 input 的值繫結為 text，然後在後面的按鈕 button 上繫結 click 事件，觸發 login 方法
methods: {
 login() {
this.$store.state.name = this.text
this.$router.push('user')
},
}
複製程式碼在 login 方法中，將輸入框的值 text賦給 Vuex 中的狀態 name，從而實現子元件之間的資料傳遞
五、官方推薦的修改狀態的方式
上面的示例是在 login 直接使用賦值的方式修改狀態 name，但是 vue 官方推薦使用下面的方法：
首先在 store.js 中定義一個方法 setName，其中第一個引數 state 就是 $store.state，第二個引數 msg 需要另外傳入 然後修改 login.vue 中的 setAuthor 方法
methods: {
 login() {
this.$store.commit('setName', this.text)
this.$router.push('user')
},
}
複製程式碼這裡使用 $store.commit 提交 setNmae，並將 this.text 傳給 msg，從而修改 name
這樣顯式地提交(commit) mutations，可以讓我們更好的跟蹤每一個狀態的變化，所以在大型專案中，更推薦使用第二種方法。