vueX10分鐘入門
通過本文你將：
1.知道什麼是vueX.
2.知道為什麼要用VueX.
3.能跑一個VueX的例子。
4.瞭解相關概念，面試的時候能說出一個所以然
5.專案中用Vuex知道該學什麼東西。
好，走起。
1.什麼是vueX?
Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
翻譯成人話，Vuex是vuejs的官方管理資料狀態的庫。
官網： https://vuex.vuejs.org/zh/
2.為什麼用它？
舉個例子，
你用vue開發一個app，
不同的元件，你都需要使用者資訊，還有一些公用的資料，你每一個元件請求一遍浪費效能，你不請求元件間屬性和引數傳來傳去，你自己維護很墨跡，麻煩也容易出錯。好吧，你覺得幹不好或者麻煩，那麼vueX幫你解決這個事兒。
這個沒什麼複雜的，大學圖書館，自助借還書，每次都把書亂放，維護很麻煩，怎麼辦，都還給圖書館管理員，圖書館管理員統一管理調配。ok，圖書管理員就是VueX.
3.怎麼用？
1.安裝
npm install vuex --save
2.初始化store.js，
（vue-cli安裝專案目錄不墨跡），
一般放到src/store/store.js下面，初始化程式碼,相當於搞了一個圖書管理員。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({})
3.寫需要的元件
建立一個Form.vue元件，懟下面的內容，
<template> <div> <label for="dabinge666">你喜歡彬哥哪一點</label> <input name="dabinge666"> </div> </template>
建立一個展示元件Display.vue
<template> <div> <p>我喜歡彬哥：</p> </div> </template>
開啟App.vue，刪掉沒用的東西，直接懟下面的程式碼，
<template>
<div id="app">
<Form/>
<Display/>
</div>
</template>
<script>
import Form from './components/Form'
import Display from './components/Display'
export default {
name: 'App',
components: {
Form,
Display
}
}
</script>
到這裡，架子就搭好了。
4.增加各種需要的東西，
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
love: ''
},
mutations: {
change(state, love) {
state.love = love
}
},
getters: {
love: state => state.love
}
})
這裡注意，你不用去管
這些破概念，你就照貓畫虎，我寫啥你抄啥，抄幾遍，你就知道資料流向了。你不知道滑鼠叫mouse，也不影響你玩電腦。
love就是你喜歡我的東西，相當於一個變數，被傳來傳去的一會。
好了，就這麼簡單可以用了。
4.使用VueX
開啟main.js，匯入，然後用。
import { store } from './store/store'
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
到這裡就相當於圖書管理員上崗等著學生來還書了,來啊，互相傷害啊！
5.我來了……
既然搞資料，躲不開剛才我們的搞的表單元件，開啟Form.vue
<template>
<div>
<label for="dabinge666">你喜歡彬哥哪一點?</label>
//輸入：離我遠一點
<input @input="changed" name="dabinge666">
</div>
</template>
<script>
export default {
methods: {
changed: function(event) {
//大聲喊出你的對彬哥的愛，讓整個圖書館都聽到
this.$store.commit('change', event.target.value)
}
}
}
</script>
開啟，Display.vue
<template>
<div>
<p>我喜歡彬哥： {{ $store.getters.love }}</p>
</div>
</template>
漂亮，如果你執行成功，你就會發現，頁面裡面出現，我喜歡彬哥：離我遠一點。
告辭！