如果你以前使用过原生的小程序开发,现在要使用mpvue框架的话,你应该也会遇到以下的问题:
1. 怎么存放可全局访问的变量?
2. 页面跳转的时候,怎么传递参数到下一个页面比较好?
3. 页面返回上一页的时候,怎么传递当前页的数据到上一页?
4. 多个页面间需要同步数据,怎么做比较好?
在原生的小程序开发中,全局变量用的基本都是通过设置获取app中的globalData、通过存储获取storage、等等的方法。
但是,既然用了mpvue这个框架,当然就要使用类Vue的方法去解决问题,那就是Vuex。
Vuex 是一个专为 Vue 应用程序开发的状态管理模式,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
它的用法是直接在组件中通过import
导入store所在的模块文件,然后调用该store上的相关方法和属性,比如commit()
、dispatch()
等方法来操作store中的内容。
让我们开始写代码,先在src
目录下新建一个stores目录,接着在stores目录下新建一个名为globalStore.js
的文件:
并在globalStore.js文件
添加以下代码:(新建一个Store
实例,管理一个名为count
的数字类型的状态,并定义2个mutations(增减)去操作这个状态值)
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment: (state) => {
state.count += 1
},
decrement: (state) => {
state.count -= 1
}
}
});
接下来,我们新建两个页面来访问这个store。
这是pages/index/main.vue
的代码内容:(从store中获取count
状态值并显示)
<template>
<div class="container">
<div>计数结果:{{count}}</div>
<a href="/pages/test/main">进入count增减页面</a>
</div>
</template>
<script>
import globalStore from "../../stores/globalStore";
export default {
computed: {
count() {
return globalStore.state.count;
}
}
};
</script>
<style scoped>
</style>
这是pages/test/main.vue
的代码内容:(调用increment
和decrement
两个mutations去更新count
值)
<template>
<div class="container">
<button @click="countDecrement">-</button>
<span>{{count}}</span>
<button @click="countIncrement">+</button>
</div>
</template>
<script>
import globalStore from "../../stores/globalStore";
export default {
computed: {
count() {
return globalStore.state.count;
}
},
methods: {
countIncrement() {
globalStore.commit("increment");
},
countDecrement() {
globalStore.commit("decrement");
}
}
};
</script>
<style scoped>
</style>
通过这颗栗子,是不是感觉到使用Vuex做页面间的传值和数据同步特别简单?你还可以在src/stores
目录下按需创建多个store模块,独立管理不同业务范围的数据,并按需导入页面组件中使用。
Vuex的更多的用法可以参考官方文档。