关于vuex状态管理模式架构

一。 什么是vuex

        集中存储管理所有组件的状态 并以相应的规则保证以一种可预测的方式发生变化。

      例子： 实现加减

      

 <p>{{count}}
      <button @click="inc">+</button>
      <button @click="dec">-</button>
 </p>

　　

const store = new Vuex.Store({
   state: {
       count: 0
   }，
   mutations: {
      inc: state => state.count++,
      dec: state => state.count--
   }
});

computed: {
  count() {
     return store.state.count;
   }
},
methods: {
   inc() {
     store.commit('inc');
    },
   dec() {
     store.commit('dec');
   }
}

触发点击事件==》 调用methods对应方法==》通过 store.commit 触发store中的mutations对应的方法来改变state属性==>数据驱动视图

 

当我们遇到 多个组件共享状态时 那么单向数据流可能不满足我们的需求

global event bus 小型页面数据共享 Vuex 大型

  需要多个数据时   用mapState对象生成计算属性

 import mystore from '@/vuex/mystore';
  // 引入mapState
  import { mapState } from 'vuex';

  export default {
    data () {
      return {
        msg: 'Hello world'
      }
    },
    computed: mapState({
      count: function(state) {
        return state.count;
      }
    }),
    /*
     引用mystore.js，store为数据仓库
     */
    store: mystore
  }

getters计算过滤操作

 

 

vuex允许我们在store中定义getters   

getter的返回值会根据它的依赖被缓存起来 只有依赖值发生改变才会重新计算

 

actions异步修改状态 mutations同步改变状态