Vuex基本入门和使用

• 什么是Vuex？

  Vuex是Vue.js应用的状态管理模式+库，它是应用程序中所有组件的集中存储，可以确保以可预测的方式修改state值。与Vue官方devTools扩展集成，可以提供时间旅行、state快照导入导出等高级功能。

  Vuex = State+ View +Actions

  State:用于驱动程序的数据源

  View:State对应的视图映射

  Actions:用户操作视图后，修改State的方法

  Vuex使用的是单向数据流，示意图如下：

  

• 为什要使用Vuex？

  在开发复杂的大型应用时，多个组件共享一个公共state的场景是非常常见的，那么就会出现以下两个问题：

  • 多个视图可能依赖于同一个state

  • 多个视图的操作可能需要修改同一个state

    针对第一个问题，深度嵌套的组件通过props层层传递state非常繁琐，props传递state对于兄弟组件是没有作用的；针对第二个问题，通过ref获取父/子组件实例应用，或者通过实践改变和同步状态的多个副本来解决，但是上述模式都非常脆弱，不利于代码维护。

  所以，我们可以从组件中提取共享state，在全局单例中管理它，任何组件都可以访问和改变state,不管它在组件树中任何位置。

如果你现在开发的是大型SPA应用，那么Vuex可以帮助你合理管理state，如果开发的是简单的小型应用，那么不建议使用Vuex。

• 怎么使用Vuex？

  Vuex通常用于大型SPA页面中，为了方便模块化管理state，我们可以这样管理Vuex

  • main.js中引入Vuex，并根据模块创建store

    如未安装Vuex，请通过npm install vuex --save安装，如已安装，请忽略

    import Vue from 'vue';
    import Vuex from 'vuex';
    import modules from './store'
    Vue.use(Vuex);
    //...
    const store = new Vuex.Store({
        modules
    })
    //...
     
    export default store;
    

  • 组织模块

    项目根目录下新建store文件夹，并创建index.js,内容如下：

    //引入各个模块的Vuex管理文件
    import module1 from '@/store/modules/module1'
    import module2 from '@/store/modules/module2'
    
    const modules = {
      module1: {
        namespaced: true,
        ...module1
      },
      module2: {
        namespaced: true,
        ...module2
      }
    }
    export default modules
    
    

    store文件夹下新建mutations.js,内容如下：

    // 项目里所有提交 mutations 事件类型
    export const SET_MUTATION1 = 'SET_MUTATION1'  
    export const SET_MUTATION2 = 'SET_MUTATION2' 
    
    //more mutaions ...
    
    

  • 定义单个模块

    store文件夹下新建module1.js,内容如下：

    import { SET_MUTATION1, SET_MUTATION2 } from '../mutations';
    
    const state = {
      state1: 'xx',
      state2: 'xxx'
    }
    
    const getters = {
      state1: state => state.state1,
      state2: state => state.state2 
    }
    
    const mutations = {
      [SET_MUTATION1](state, state1) {
          state.state1 = state1
      },
      [SET_MUTATION2](state, state2) {
          state.state2 = state2
      }
    }
    
    const actions = {
      setList({commit}, { state1, state2 }) {
        commit(SET_MUTATION1, state1)
        commit(SET_MUTATION2, state2)
      }
    }
    
    export default { state, getters, mutations, actions }
    

    同理，store目录下新建module2.js,文件内容示例同module1.js