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 }