vuex方法

    網站項目，多頁應用，webpage，對兼容性要求高
    webapp，應用程序，交互不少，「購物網站」
    後臺管理，網站的後臺管理，企業的資源管理系統
    網頁遊戲
    vue和react適合後臺管理，webapp也適合，vue有weex，react有reactnative

    【Show】，show爲方法名，能夠將其設爲常量，並用一個模塊統一放置
##Vuex狀態管理
    Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態
    state，驅動應用的數據源；
    view，以聲明方式將state映射到視圖；
    actions，響應在view上的用戶輸入致使的狀態變化。
##Vuex步驟
###1，首先下載依賴npm install vuex --save
    一個node package有兩種依賴，一種是dependencies一種是devDependencies，其中前者依賴的項該是正常運行該包時所須要的依賴項，然後者則是開發的時候須要的依賴項，像一些進行單元測試之類的包。

    npm install module-name -save自動把模塊和版本號添加到dependencies部分
    npm install module-name -save-dve自動把模塊和版本號添加到devDependencies部分
    npm install module-name 那麼只會安裝dependencies部分
###2，新建一個store文件夾，用來存儲相關文件
####1，index.js文件，
    首先引入相關模塊，Vue和Vuex，Vue.use(Vuex)括號裏面爲須要用到Vuex，
    在裏面寫相關步驟
    import Vue from "vue";
    import Vuex from "vuex";
    import studentStore from "./student"
    Vue.use(Vuex);//用vuex
    const store = new Vuex.Store({//注意Store首字母大寫
    state:{
        count:0
    },
    modules:{
        studentStore
    },
    mutations:{
        addCount(state){
            state.count++;
        }
    }
    });
    export {store as default}
#####mutations
    更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation。Vuex 中的 mutations 很是相似於事件：每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數：

    你不能直接調用一個 mutation handler。這個選項更像是事件註冊：「當觸發一個類型爲 addCount 的 mutation 時，調用此函數。」要喚醒一個 mutation handler，你須要以相應的 type 調用 store.commit 方法：

    store.commit('addCount')，在須要存儲的數據裏面，傳遞相關函數。
#####modules
    裏面爲mutations裏面的函數名，經過在引入student文件裏面定義的mutation模塊，來達到分散管理的做用。
###2，mutations.js文件
    const SHOW_DATA = "SHOW_DATA";
    const SHOW_STUDENT = "SHOW_STUDENT";
    export {SHOW_DATA,SHOW_STUDENT}
    用常量的方式來存儲index.js裏面的mutations須要用到的函數名字，方便查詢管理和調用
###3，student.js文件
    import {SHOW_DATA,SHOW_STUDENT} from "./mutations";
    const studentStore = {
    state:{
        data:{rows:[]},
        student:{}
    },
    mutations:{
        [SHOW_DATA](state,data){
            state.data = data;
        },
        [SHOW_STUDENT](state,student){
            state.student = student;
        }
    }
    }
    export {studentStore as default}
    用來存放mutations模塊

###4，main.js
    import Vue from 'vue'
    import router from './router'
    import Index from "@/components/Index"
    import store from "@/store"
    Vue.config.productionTip = false
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,//在最外層套上store下的index.js模塊
      template: '<Index/>',
      components: { Index }
    })
    
    裏面須要引入store文件下面的index.js文件，當文件夾下面有index.js文件時,只需寫入相關文件路徑就能引入index.js文件,在最外層套上store下的index.js模塊
##3，在須要向store裏面取數據的XX.vue文件。
###1，store.commit();
    store.commit(SHOW_DATA,data);
    提交相關數據

##4,在須要向store取數據的XX.vue文件
###1,computed
    因爲 Vuex 的狀態存儲是響應式的，從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態：
    computed: {
        count () {
          return store.state.count
        }
      }
    或者
    computed:{
        ...mapState({
            data:state=>state.studentStore.data
            
        })
    },

####mapState 輔助函數
    當一個組件須要獲取多個狀態時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。爲了解決這個問題，咱們能夠使用 mapState 輔助函數幫助咱們生成計算屬性，讓你少按幾回鍵：
    1.import {mapState} from "vuex"
    引入mapState
    computed:{
        ...mapState({
            data:state=>state.studentStore.data
            
        })
    },