vuex初識

狀態管理Vuex

1. 安裝vuex

   npm install vuex

2. 在src目錄下建立store/store.js文件，並初始化狀態

   import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
   
    const state = {
    	count: 10
    };
   
    const mutations = {
    	jia(state){
    		state.count++;
    	},
    	jian(state){
    		state.count--;
    	}
    }
   
    export default new Vuex.Store({
    	state,
    	mutations
    });

3. Vuex 經過 store 選項，提供了一種機制將狀態從根組件「注入」到每個子組件中（需調用 Vue.use(Vuex));

   // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store/store'//注入store組件
   
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,	
      template: '<App/>',
      components: { App }
    })

4. 在子組件中使用

   <template>
      <div class="hello">
        <div class="content">
          <p>{{$store.state.count}} - {{count}}</p>
          <button @click="$store.commit('jia')">+</button>
          <button @click="$store.commit('jian')">-</button>
        </div>
      </div>
    </template>
   
    <script>
    import { mapState } from 'vuex'
    export default {
      name: 'HelloWorld',
      data () {
        return {
          msg: 'Welcome to Your Vue.js App',
        }
      },
      computed:{
        count(){
          return this.$store.state.count + 10;
        }
      }
    }
    </script>

   如圖

** 注：**更改Vuex中store的狀態的（state）惟一方法是提交mutation；

5. mutation

• 每一個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調函數 (handler)，回調函數的第一個參數是state,第二個是字符串或着對象，爲了多傳幾個參數通常都是對象：

• count mutations = {
   		fun1(state,param){
   			... //此處能夠改變$store.state中的值
   		},
   		fun2(state,obj){
   			...//此處能夠改變$store.state中的值
   		}
   	}

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

• <button @click="$store.commit('jia')">+</button>
  	<button @click="$store.commit('jian')">-</button>
  
  	//能夠向 store.commit 傳入額外的參數，即 mutation 的 載荷（payload）
  	store.commit('fun1', obj)//obj 與mutation中定義mutations的obj參數一一對應  
  
  	//提交 mutation 的另外一種方式是直接使用包含 type 屬性的對象：  
  	store.commit({ type: 'increment',amount: 10})

  ** 注：**mutation中的方法必須是同步函數，不可以使用異步或回調；

• 在組件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 輔助函數將組件中的 methods 映射爲 store.commit 調用（須要在根節點注入 store）

  <template>
  	  <div class="hello">
  	    <div class="content">
  	      <p>{{$store.state.count}} - {{count}}</p>
  	      <button @click="$store.commit('jia')">+</button>
  	      <button @click="$store.commit('jian')">-</button>//這裏的「jia」跟「jian」實現的效果都同樣
  	      <button @click="jia">+</button>
  	      <button @click="jian">-</button>
  	    </div>
  	  </div>
  	</template>
  
  	<script>
  	import { mapState } from 'vuex'
  	import { mapMutations } from 'vuex'
  	export default {
  	  name: 'HelloWorld',
  	  data () {
  	    return {
  	      msg: 'Welcome to Your Vue.js App',
  
  	    }
  	  },
  	  computed:{
  	    count(){
  	      return this.$store.state.count + 10;
  	    }
  	  },
  	  methods:{
  	    ...mapMutations([//注意在mapMutations以前有三個點
  	      "jia",
  	      "jian"
  	    ])
  	  },
  	  ...mapMutations({
  	      add: 'increment' // 將 `this.add()` 映射爲 `this.$store.commit('increment')`
  	  }),
  	  ...mapMutations({// 將 `this.funobj()` 映射爲 `this.$store.commit('fun1')`,並帶有對象參數{}
  	      funobj:{type:'fun1',first:10,second:20}
  	  })
  	}
  	</script>

** 注：**Mutation 需遵照 Vue 的響應規則

1. 既然 Vuex 的 store 中的狀態是響應式的，那麼當咱們變動狀態時，監視狀態的 Vue 組件也會自動更新。這也意味着 Vuex 中的 mutation 也須要與使用 Vue 同樣遵照一些注意事項：

2. 最好提早在你的 store 中初始化好全部所需屬性。

3. 當須要在對象上添加新屬性時，你應該使用

   Vue.set(obj, 'newProp', 123),

   或者以新對象替換老對象。例如，利用 stage-3 的對象展開運算符咱們能夠這樣寫：

   state.obj = { ...state.obj, newProp: 123 }