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