5分钟上手使用vuex，vuex状态管理，vuex遇到的坑_vuex混入遇到的坑

对象篇

模块化编程-自研模块加载器

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

    count: 10
}
// 定义 mutations（即对变量state进行的操作）
const mutations = {
    INCREMENT(state, canshu) {
        state.count++
    },
    DECREMENT(state) {
        state.count--
    }
}

// 创建 store 实例（先不着急看该部分代码，该部分就是将全局变量，mutations,actions,getters整体变成一体化的实例）
export default new Vuex.Store({
    actions,
    getters,
    state,
    mutations
})

actions.js中的代码
之所以用actions去提交mutations，应该是为了是的mutations中的方法可以异步操作（mutations中方法为同步执行，该处可能会迷惑，但是其实就是用actions中的方法去调用mutations中的方法而已）。

// 用于提交mutations中的INCREMENT方法（可根据自己的需要进行传参，对应的mutaitons中要接收参数）
export const increment = ({commit}) => {
commit(‘INCREMENT’, canshu)
}
// 用于提交mutations中的DECREMENT方法
export const decrement = ({commit}) => {
commit(‘DECREMENT’)
}

getters.js中的代码  
 一般getters中的代码比较简单，主要就将全局变量简单封装并导出，方便其他组件的调用。

// 该处将全局变量state下的count导出，是的其他vue组件都可以获取，进行修改
export const getCount = state => {
return state.count
}

上面对vuex的几个组成部分进行了基本的了解，要使得整个项目使用vuex进行全局变量管理，要在main.js中引入vuex，并使用  
 在main.js中引入vuex（该部分引入在store.js添加也可）

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

至此，项目已经引用了vuex，接下来告诉大家如何在组件中引入  
 假如我们要在一个名为test.vue的组件中，对全局变量state.count进行修改