Vuex

vuex是什么？

怎么使用？

哪种功能场景使用它？

1、读取的公共状态集中放在store中； 改变store状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

2、在main.js引入store，注入。新建了一个目录store，….. ，export 。

3、场景有：单页应用中，组件之间的状态、音乐播放、登录状态、购物车

 

状态树 state

    Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。

同步操作 mutations

    mutations定义的方法动态修改Vuex 的 store 中的状态或数据。

getters

     类似vue的计算属性，主要用来过滤一些数据。

action 

     actions可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。

 

view 层通过 store.dispath 来分发 action。 ？？

 

// store示例

const store = new Vuex.Store({ 
  state: {
     count: 0
  },
  mutations: { 
    increment (state) {
      state.count++
    }
  },
  actions: { 
    increment (context) {
       context.commit('increment')
    }
  }
})

 

modules

      项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

 const moduleA = {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
 }

 const moduleB = {
      state: { ... },
      mutations: { ... },
      actions: { ... }
 }

 const store = new Vuex.Store({
      modules: {
      a: moduleA,
      b: moduleB
 })