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的使用大家肯定也都掌握了，如有问题欢迎大家给我留言，相互学习交流，才能共同进步！