uniapp项目vuex的实战使用

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第28天，点击查看活动详情

上一篇文章中我们为大家介绍一下vuex的State,Getter,Mutation,Action,Module这五个核心概念，接下来将介绍一下vuex在我们的uniapp项目中的实战用法了。

• 我们创建好文件以及文件夹之后在index.js文件里面import引入vue以及vuex,然后创建一个state，里面定义一个初始数据，用户的积分，初始值为100，然后再在mutation里面定义一个增加积分的方法，addCount里面传入state这个参数，然后让state.count+=5,就是说没执行一次这个方法，state中的count就加5，最后将这个store暴露出去，具体的代码如下所示：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state:{
count:100
},
getters:{
},
mutations:{
addCount:function(state){
state.count+=5
}
},
actions:{
}
})
export default store;

• 然后我们需要使用到这个staet中的count数据的时候就需要在需要使用的页面里面import引入一下store，然后通过computed从计算方法里面return返回出来store中的count,具体的代码如下所示

import store from "@/store";
computed: {
count() {
return store.state.count;
},
},

• 然后我们在页面上就可以使用插值表达式来展示出count这个数据了，即{{count}}
• 当我们需要通过mutations中的addCount方法来增加他的数量的时候，需要在一个方法里面调用this.$store.commit这个方法提交，提交里面的内容就是mutations中定义的方法名称addCount，具体的代码如下所示：

this.$store.commit("addCount");

提交了之后我们页面上的state中的count数量就会从一百变成一百零五，多次点击之后他还会增加，这个方法可以在任何一个页面中应用，十分方便 ------本页内容已结束，喜欢请分享------

感谢您的来访，获取更多精彩文章请收藏本站。