一。 什么是vuex

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

      例子： 实现加减

      

{
    {count}}      +      - 

　　

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同步改变状态