使用mpvue開發小程序教程（六）

時間 2019-11-12

標籤使用 mpvue 開發程序教程简体版

原文原文鏈接

在上一章節中，咱們列舉了在Vue中能用但在mpvue中不能用或須要特別注意的特性，在實際開發前瞭解一下仍是頗有必要的，能夠避免浪費找錯誤的時間。html

若是你使用過原生的小程序框架，你必定經歷過或思考過怎麼解決如下的問題：vue

怎麼存放可全局訪問的變量？
頁面跳轉的時候，怎麼傳遞參數到下一個頁面比較好？
頁面返回上一頁的時候，怎麼傳遞當前頁的數據到上一頁？
多個頁面間須要同步數據，怎麼作比較好？

網上一搜，解決的方法一般也是五花八門的，什麼經過app上的globalData啊、經過存取storage啊、經過一個單獨的模塊(module)啊、經過Page路由棧啊、經過引入自定義事件啊、經過引入redux啊，等等等等......vuex

在原生小程序框架裏，確實沒有提供什麼太統一的方式來指導開發者解決這個問題，你們只能各自用着暫時能解決當前問題的方案。redux

不過，既然咱們用了Vue/mpvue，遇到這種狀況，天然而然的就會想到一個方案，那就是Vuex。Vuex 是一個專爲 Vue 應用程序開發的狀態管理模式，它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。小程序

經過使用Vuex，咱們能夠在mpvue裏很方便的對須要在app、頁面、組件之間共享的數據進行很好的統一管理，能夠更方便有效的在各個代碼部分對這些共享數據進行訪問，同時可使得你的代碼條理變得更加清晰。app

咱們知道，Vuex通常有2種用法，當建立好store後：框架

第一種用法是將store綁定到須要訪問store內容的Vue實例上，而後經過該Vue實例下組件的this.$store來引用；或經過mapState等一系列映射函數將store中的state、getters、mutations、actions等映射成組件的計算屬性或methods方法來使用；函數
第二種用法是直接在組件中經過import導入store所在的模塊文件，而後調用該store上的相關方法和屬性，好比commit()、dispatch()等方法來操做store中的內容。工具

通過個人實測，上面的這兩種方式在mpvue中也都是可用的。可是，因爲mpvue不像Vue Web單頁應用那種單Vue實例的結構，而是採用了多Vue實例的結構（app和各個頁面都會由單獨的Vue實例來管理），因此我我的推薦採用上面所說的第二種用法，這種方式會更加靈活和簡單一些。flex

讓咱們開始寫代碼，先在src目錄下新建一個stores目錄，接着在stores目錄下新建一個名爲global-store.js的文件：

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實例，管理了一個名爲count的數字類型的狀態，並定義了2個mutations去操做（增減）這個狀態值。

接着，咱們要在2個頁面中訪問這個store。讓咱們在src/pages目錄下編寫2個頁面：index和test1。

這是pages/index/index.vue的代碼內容：

<template>
  <div class="container">
    <div>計數結果：{{count}}</div>
    <a href="/pages/test1/main" class="navlink">進入計數器頁面</a>
  </div>
</template>

<script>
import globalStore from "../../stores/global-store";

export default {
  computed: {
    count() {
      return globalStore.state.count;
    }
  }
};
</script>

<style scoped>
.navlink {
  text-decoration: underline;
}
</style>

這是pages/test1/index.vue的代碼內容：

<template>
  <div class="container btns">
    <button class="calbtn" @click="hanleDecrement">-</button>
    <span class="calnum">{{count}}</span>
    <button class="calbtn" @click="hanleIncrement">+</button>
  </div>
</template>

<script>
import globalStore from "../../stores/global-store";

export default {
  computed: {
    count() {
      return globalStore.state.count;
    }
  },

  methods: {
    hanleIncrement() {
      globalStore.commit("increment");
    },

    hanleDecrement() {
      globalStore.commit("decrement");
    }
  }
};
</script>

<style scoped>
.btns {
  display: flex;
  align-items: center;
}
.calnum {
  color: red;
  font-size: 32px;
}
</style>