vue中vuex整理

一、Vuex全局状态管理

如果组件间嵌套层次较多，比较复杂，多个组件之间共有一个数据，使用组件传值处理比较麻烦，就需要用到vuex。vuex是vue配套的数据管理工具，可以将组件共享数据保存到vuex中，方便整个程序任何组件都可以获取和修改vuex中保存的公共数据

二、工作流程

1、vuex的5个模块：分别是state，mutations, actions, getters, modules
2、流程：我们将组件的公共状态定义在 vuex仓库的state中,state是只读的，无法直接修改，必须调动仓库中的某个mutation才能修改状态，actions存放所有的异步方法，getters可以理解为vuex中的计算属性，当我们在某个组件中使用vuex中的某个state时，不是直接使用原值，而是需要派生出一个新的值，就可以定义getters，可以在组件中获取

三、定义vuex

第一步: 引入vuex
第二步: 创建store实例对象，state主要用来存放全局数据，mutations用来存放修改state中的数据的所有同步方法，actions存放所有的异步方法，getters相当于组件中的计算属性，modules模块化拆分
第三步：main.js中引入store实例对象，将store实例挂载到vue根实例上

import Vue from 'vue';

// 第一步: 引入vuex
import Vuex from 'vuex';
Vue.use(Vuex)

// 引入模块
import moduleA from './modules/ModuleA';
import moduleB from './modules/ModuleB';

// 第二步: 创建store实例对象
const store = new Vuex.Store({
    state: { 
        id: 100,
        name: "张三",
        count: 0
    },
    mutations: { 
        addCount(state) {
            state.count++  
        },
    },
    actions: { 
        addAsyncCount(context) {
            setTimeout(() => {
                context.commit('addCount')
            }, 1000)
        },
    },
    getters: { 
        doubleCount(state) {
            return state.count * 2
        },
    },
    modules: { 
        moduleA,  
        moduleB
    },
})

export default store

// 第三步：引入store实例对象，将store实例挂载到vue根实例上
import store from '@/store'
new Vue({
  store, 
  router,
  render: h => h(App),
}).$mount('#app')

四、使用vuex

1.方法一：常规语法
使用vuex中state: this.$store.state.xxx
使用vuex中getters：this.$store.getters.xxx
调用mutations中的方法：this.$store.commit("方法名")
调用actions中的方法：this.$store.dispatch("方法名")
2.方法二：使用辅助函数mapState, mapMutations, mapActions, mapGetters
例举mapState的使用方法，其余辅助函数使用类似

// html部分
count:{{ count }}
// js部分
import { mapState } from 'vuex'  // 从vuex 中按需导入
  computed:{
	 ...mapState(['count'])，
  },