mpvue开发微信小程序的全局变量问题-Vuex

如果你以前使用过原生的小程序开发，现在要使用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的更多的用法可以参考官方文档。

mpvue开发微信小程序的全局变量问题-Vuex

猜你喜欢