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;
    }
}
 
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;

}

调用方法：this.$store.commit{(}^{\prime }ad{d}^{\prime });this.$store.commit(‘reduce’); 注意传参问题，这里可以传两个参数，应该只能传两个参数，一个参数必须是state，例如

add(state,num){

state.count += num;

}

这样每次操作count的值就会加num。