mpvue如何使用vuex

首先，問你們一個問題，vue是單頁面應用，爲何vuex在小程序的多頁面中也可使用？

答：雖然小程序是多頁的，但小程序的多頁主要是指 視圖層 是多個 webview，相互獨立，可是 js 都是在同一個執行環境中的，因此在mpvue中能夠直接使用vuex來管理狀態。

解決了這個困惑以後，你們是否是還有一個疑問，mpvue中能直接使用vuex嗎？須要配置些什麼嗎？

答：用vuex必然要用到vuex相關的一些輔助函數，如：mapGetters、mapMutations等。

import Vue from 'vue'
import App from './App'

import store from './store'
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
  ...App,
  store
})
app.$mount()複製代碼

正常思路你們應該是按照我上面這樣的配置在main.js中引入vuex,而後在小程序中當使用到輔助函數時，你們會發現一個問題，報了個奇怪的錯誤，例：

​

問題分析：

（1）、在通常的vue-cli + vuex項目中，主函數 main.js 中會將 store 對象提供給 「store」 選項，這樣能夠把 store 對象的實例注入全部的子組件中，從而在子組件中能夠用this.$store.state.xxx、this.$store.dispatch 等來訪問或操縱數據倉庫中的數據，如：

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App)
})複製代碼

（2）、在mpvue + vuex項目中，很遺憾不能經過上面那種方式來將store對象實例注入到每一個子組件中（至少我嘗試N種配置不行），也就是說，在子組件中不能使用this.$store.xxx，從而致使輔助函數不能正確使用。這個時候咱們就須要換個思路去實現，要在每一個子組件中可以訪問this.$store才行。既然咱們須要在子組件中用this.$store 訪問store實例，那咱們直接在vue的原型上添加$store屬性指向store對象不就行啦,一行代碼便可：

Vue.prototype.$store = store複製代碼

即：

import Vue from 'vue'
import App from './App'

import store from './store'
Vue.prototype.$store = store
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
  ...App,
  store
})
app.$mount()複製代碼

能夠看到，這個時候輔助函數已經生效了：

​

最後，給你們介紹一個小技巧，用於查看vuex相關數據，方便bug排查：

• 在store目錄下的index.js中引入vuex內置的打印功能，以下：

import Vue from 'vue'
import Vuex from 'vuex'

import * as getters from './getters'
import state from './state'
import mutations from './mutations'
import createLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [createLogger()] : []
})複製代碼

• 這樣咱們就能在控制檯實時看到咱們要改變的數據狀態了。

總結：

工做中，咱們須要觸類旁通，能借鑑的東西，咱們要勇敢嘗試，我相信讀完這篇文章，你們對vuex在小程序中的使用的許多疑惑都消除了，mpvue+vuex的使用你們確定也都掌握了，若有問題歡迎你們給我留言，相互學習交流，才能共同進步！