一、VueX简介

简介

vue中的状态（数据）管理的文件，VueX中的数据，可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。
五大核心： state, getters, mutations, actions, modules。

1. state：vuex的基本数据，用来存储变量

2. geeter：从基本数据(state)派生的数据，相当于state的计算属性,不改变state中的数据

3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
　　 回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。

5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
格式：

new Vue=({
el:"#app",
computed：{
	// 使用 VueX中getters中的countDouble计算
	方法一：
		countDouble: function(){
   		return this.$store.getters.countDouble
		}
	方法二：
	import { mapGetters } from 'vuex'
 ...mapGetters([
      'countDouble'
    ]),
}，
methods:{
	this.$store.conmmit('mutations中的方法名')
	this.$store.dispath('actions中的方法名')
}
})
const store = new Vuex.Store({
		state: {
            // 存放公用状态（数据）
            num: 0
        },
        getter: {
            // state 的计算属性
            // 从state中获取数据
            相当于 computed 属性
        	// 单个参数
       		 countDouble: function(state){
         		 return state.count * 2
        	},
        	// 两个参数
        	CountDoubleAndDouble: function(state, getters) {
         		 return getters.countDouble * 2
        	}
        },
        mutations: {
        	// 存放同步方法
            // 更新state中数据的逻辑
			//相当于methods中的方法
			使用 ：this.$store.conmmit( 'mutations中的方法 ' ) 调用
        },
        actions: {
        	// 存放同步方法
            // 触发mutations
            使用：this.$store.dispath( 'actions中的方法 ' )调用
            }
})

补充：actions中的参数

一般在使用actions方法时我们会像下面的书写方式：

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  }
}

而很多人都会疑惑{commit}是代表了什么，又是怎么来的。下面就来说一下，action函数可以接收一个与store实例具有相同方法的属性context，这个属性中包括下面几部分：

context:{
		state,   等同于store.$state，若在模块中则为局部状态
		rootState,   等同于store.$state,只存在模块中
		commit,   等同于store.$commit
		dispatch,   等同于store.$dispatch
		getters   等同于store.$getters
}
常规写法调用的时候会使用context.commit，但更多的是使用es6的变量解构赋值，也就是直接在参数的位置写自己想要的属性，如：{commit}。

VueX中的辅助函数

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex'
 computed: {
 	// mapState 和 mapGetters 在计算属性中解构
 	// 解构出来的 num 和 geetNum 可以直接在页面使用,和state中数据同步
    ...mapState({
      num: (state) => state.num
    }),
    ...mapGetters({
      geetNum: 'getAdd'
    })
  },
  methods: {
  // mapMutations和 mapActions在methods中解构
  // 解构出来的 Addcount 和 actionRed 可以直接在 methods中用 this.Addcount()调用
    ...mapMutations({
      Addcount: 'Addcount'
    }),
    ...mapActions({
      actionRed: 'actionRed'
    }),
    }

vuex的拆分使用（详细）模块化处理

--------------------------原文链接,vueX模块化处理-------------------------