Vue总结

Vuex VueComponent是食客,食客通过dispatch来定菜,Action是服务员,服务员可以和外部的Backend API后端API通信处理commit,Mutation是后厨可以处理Action传递的action和commit,当不需要与后端进行交互的时候也可以直接接收来自VueComponents的commit,state就是处理好的状态。

• Actions、Mutations、State都要通过stores的管理，store是仓库的意思 。因为VueComponents的dispatch方法不是window提供的，而是store提供的。
• Actions、Mutations、State都是对象
  

使用Vuex的步骤

1. npm i vuex
2. Vue.use(Vuex) 引入并使用Vuex
   在store/index.js文件中引入并使用Vuex插件

    import Vuex from 'vuex'
    Vue.use(Vuex)

此后就可以在vm配置项中传入store配置项，此后就可以让所有的组件实例对象和vm都能看到$sotre
3. 创建store
创建stroe文件夹以及index.js文件

  //actions 用于响应组件中的动作
  const actions = {}
  //mutations-用于操作数据(State)
  const mutations = {}
  //state-用于存储数据
  const state = {}

  //创建store
  const store = new Vuex.Store({
    //放入三大对象,对象的简写形式
    actions,
    mutations,
    state
  })
  //导出store
  export default store
  //也可以直接创建并导出
  export default new Vuex.stroe({})

4. 全局暴露store,让所有的组件实例对象都能看见store
   在main.js中引入store

   因为js总是先执行import语句再执行其余代码,如果直接在main.js中引入Vuex和store/index.js,那么程序会首先执行引入的文件,当执行到store/index.js文件时,由于还没有执行Vue.use(Vuex),所以会报错.
   因此,应该直接在store/index.js文件中引入并调用Vuex.