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;

}

调用方法：this.$store.commit('add'); this.$store.commit('reduce'); 注意传参问题，这里可以传两个参数，应该只能传两个参数，一个参数必须是state，例如

add(state,num){

state.count += num;

}

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

actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。

这些只是vuex的简单实用，有什么写错的地方请多多指教，还有一些比较高级的用法正在研究学习中。
---------------------
来源：CSDN
原文：https://blog.csdn.net/leileibrother/article/details/78874578

猜你喜欢