第五課時: Vuex狀態管理,state&getter

1.安裝Vuex
首先在 vue 2.0+ 你的vue-cli項目中安裝 vuex :

npm install vuex --save

然後 在src文件目錄下新建一個名爲store的文件夾，爲方便引入並在store文件夾裏新建一個index.js,裏面的內容如下:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
 
export default store;

接下來，在 main.js裏面引入store，然後再全局注入一下，這樣一來就可以在任何一個組件裏面使用this.$store了：

import store from './store'//引入store
 
new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
})

2.獲取state：
說了上面的前奏之後，接下來就是納入正題了，就是開篇說的state的玩法。回到store文件的index.js裏面，我們先聲明一個state變量，並賦值一個空對象給它，裏面隨便定義兩個初始屬性值；然後再在實例化的Vuex.Store裏面傳入一個空對象，並把剛聲明的變量state仍裏面：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={//要設置的全局訪問的state對象
     showFooter: true,
     changableNum:0
     //要設置的初始屬性值
   };
 const store = new Vuex.Store({
       state
    });
 
export default store;

做完上面的步驟，你已經可以用this.$store.state.showFooter或this.$store.state.changebleNum在任何一個組件裏面獲取showfooter和changebleNum定義的值了，但這不是理想的獲取方式；

3.獲取方式getters
vuex官方API提供了一個getters，和vue計算屬性computed一樣，來實時監聽state值的變化(最新狀態)，並把它也扔進Vuex.Store裏面，具體看下面代碼:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   //要設置的全局訪問的state對象
     showFooter: true,
     changableNum:0
     //要設置的初始屬性值
   };
const getters = {   //實時監聽state值的變化(最新狀態)
    isShow() {  //方法名隨意,主要是來承載變化的showFooter的值
       return state.showFooter
    },
    getChangedNum(){  //方法名隨意,主要是用來承載變化的changableNum的值
       return state.changebleNum
    }
};
const store = new Vuex.Store({
       state,
       getters
});
export default store;

我們可以通過this.$store.getters.isShow和 this.$store.getters.getChangedNum 來獲取

4.mapGetters 輔助函數
mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性：

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
  // 使用對象展開運算符將 getter 混入 computed 對象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}