mpvue + vuex，用mapMutations + mapGetters 实现简单的存与取

实现效果：在a页面存数据，通过a页面进入b页面时取数据

首页，在store文件夹里创建4个js文件：

state.js

const state = {
  disc: {}
}

export default state

mutations.js

const mutations = {
  set_disc(state, disc) {
    state.disc = disc
  }
}

export default mutations

getters.js

export const disc = state => state.disc

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import * as getters from './getters'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  getters
})

在a页面：import { mapMutations } from 'vuex'   。前提是已经安装了vuex。

  将item存入set_disc

methods: {
  selectItem(item) {
    wx.navigateTo({
      url: `/pages/disc/main?id=${item.id}`
    })
    this.setDisc(item)
  },
  ...mapMutations({
    setDisc: 'set_disc'
  })
}

从a页面跳转到b页面后，在b页面取出数据

  import { mapGetters } from 'vuex'

computed: {
  ...mapGetters([
    'disc'
  ])
}

重要事情：

mpvue里不能直接通过this.$store拿到数据，所以需要在vue的原型上添加属性是$store的store对象

即在main.js中加上：Vue.prototype.$store = store

这部分详情请看我的另一篇博文:解决vuex辅助函数在mpvue中不能使用的问题