Vue项目状态管理之Vuex-优快云博客

vue单页项目开发总是要管理一些状态值，比如登录状态之类，简单的学习了vuex，分享一下。

这里暂时介绍vuex里面的三个模块的功能，state,getters和mutations

1，在我们的单页项目中安装vuex

npm install vuex --save

2，在我们项目的文件目录中的src文件夹下面新建一个文件夹，文件夹名名字随意，一般叫vuex，store之类的，我这里取名vuex，然后在这个新建的文件夹里新建一个index.js的文件

3，在index.js文件中引入vue和vuex，然后写上我们需要用的vuex模块，我这里写了state，getters和mutations，全部代码如下。下面会讲解一下这三个的功能和用法。

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

Vue.use(Vuex)

const state = {
count: 1
}

const getters = {
getNum(state) {
return state.count;
}
}

const mutations = {
add(state) {
state.count += 1;
},
reduce(state) {
state.count -= 1;
}
}

actions: {
        nameAsyn({commit}) {
            setTimeout(() => {
                commit('SET_AGE', 18);
            }, 1000);
        }
    },

export default new Vuex.Store({
state,
getters,
mutations
})

4，我们需要在main.js文件中引入已经上面我们建好的文件

在引入的时候需要注意，store是个关键字，必须要用store这个词！！！我试着用其他的就会报错。

5，state，getters和mutations的具体用法

state：这是一个存储状态值的对象，我们需要存储的状态值都放在这个对象里。比如我在文件存了count，它的初始值是1，获取state里的值使用 this.$store.state.count 这个方法。比如我在mounted里面console.log(this.$store.state.count);输出的就是1.( this必须写！！！)

getters：如它的翻译一样，你可以在这里面获取想要的状态值。我在这里面写了一个函数return state里面的count值。需要注意第一个参数一定是state！！！

getNum(state){

return state.count

}

如何使用这个getters对象呢，调用方法 this.$store.getters.getNum ，比如我在mounted里面console.log(his.$store.getters.getNum);输出的就是1.( this必须写！！！)

mutations：这里是对状态值进行二次加工的，可以写一些函数对状态值进行处理。比如我写的一个加一个减的函数

add(state){

state.count += 1;

}

reduce(state){

state.count -= 1;

}