如果你以前使用過原生的小程式開發，現在要使用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的更多的用法可以參考官方文件。