Vuex简单入门实例

　　对不少想入门Vue的新人来讲，常常看到那个大神开源的dome,什么全家桶的，Vuex看上去是个高大上的东西。官方文档解释的很专业化，简单说就是不通俗。对咱们这些小白来讲就是很难一会儿理解。

　　这篇是做者学习小记，若有什么错误的地方，还请不吝赐教！

　　Vuex是状态管理模式，这个怎么理解呢？

　　首先，Vuex是为了处理复杂数据逻辑而开发出来的，目的固然是为了数据，而这数据是共享的，不经过的模块可能须要不一样或者相同的数据。那么咱们就须要获得不一样状态下的数据。

　　咱们知道Vuex有四大模块state、getters、mutations、actions，他们就是管理不一样的数据状态信息。

　　state: 存储初始化数据,能够自定义数据,能够看作初始状态；

　　getters: 从state中获取想要的数据，而mutations对数据的操做都是基于它的,能够看作数据提取状态；

　　mutations: 对getters中的数据进行所需处理，便可以对其从新赋值，触发它须要使用commit方法，能够看作待处理状态

　　actions: 使用commit方法，异步触发mutations的函数进行数据的赋值和更新,能够看作待触发状态

　　1、接下来上代码：

　　项目结构（截取）（手脚架）：

　　

　　2、首先须要安装vue 和 vuex

　　store/index.js

import Vue from 'vue'
    import Vuex from 'vuex'

    Vue.use(Vuex)

    const store = new Vuex.Store({
        // 首先声明一个状态 state，初始化状态
        state: {
            count: 0
        },

        // 获取数据状态信息
        getters: {
           count: state => state.count
        },

        // 对获取的数据状态进行相应的处理,可传参，处理的后的数据状态会返回给getters，待处理状态
        mutations: {
            increment (state, m) {
                state.count += m
            },
            decrement (state, n) {
                state.count -= n
            }
        },


        // actions 注册并触发处理函数,能够传参，当这个函数被触发时，将状态提交到mutations中处理， 正在处理状态
        actions: {
            increment: ({commit}, m) => commit('increment', 5),  //在actions中通常作数据请求,再使用commit方法，这里直接赋值写死
          decrement: ({commit}, n) => commit('decrement', 3)
        }
    })

    // 将store 暴露出去
    export default store

　　3、main.js中，注意加上全局store,  store导入时简写注意看项目结构

　　

　　4、做者使用的手脚架自动构建的，因此router直接配置到了组件hello，我直接在hello组件中输出数据。

　　hello.vue中

　　

　　5、最后编译运行以下：