微信小程序mpvue入坑(4)之vuex使用---新增源码地址

微信小程序mpvue入坑(4)之vuex使用

• 微信小程序mpvue入坑(1)之技术对比选型
• 微信小程序mpvue入坑(2)之初始化及引入vantUI
• 微信小程序mpvue入坑(3)之Promise封装wx.request及整合Api
• 微信小程序mpvue入坑(5)之组件封装

1、首先安装vuex

npm install vuex -S

2、在src下新建一个store文件夹

新建index.js文件代码如下

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
// 解决刷新数据消失的问题
import createPersistedState from 'vuex-persistedstate' // 数据持久化
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
// console.log(111, modules)
export default new Vuex.Store({
  getters,
  modules,
  plugins: [
    // 数据持久化
    createPersistedState({
      storage: {
        getItem: key => wx.getStorageSync(key),
        setItem: (key, value) => wx.setStorageSync(key, value),
        removeItem: key => () => { }
      }
    })
  ]
})

新建modules文件夹（user.js是存放登录用户信息；common.js是各页面需要的数据）user.js代码如下

import requestHttp from '../../api/apiPath'
const state = {
  avatarUrl: '', // 微信头像
  token: '',
  userInfo: {} // 登录个人信息
  .......
}

const mutations = {
  SET_TOKEN: (state, token) => {
    state.token = token
  },
  SET_USER_INFO: (state, userInfo) => {
    state.userInfo = userInfo
  },
  SET_USER_TYPE: (state, userType) => {
    state.userType = userType
  }
  ......
}
const actions = {
  // 获取当前登录人信息
  getUserInfo ({ commit }) {
    return new Promise((resolve, reject) => {
      requestHttp('getProfile').then(response => {
        const data = response.data
        const role = data.roles[0] && data.roles[0].roleName
        if (role === '供应商') {
          commit('SET_USER_TYPE', '0')
        } else if (role === '司机') {
          commit('SET_USER_TYPE', '1')
        }
        commit('SET_USER_INFO', data)
        resolve(response)
      }).catch(error => {
        reject(error)
      })
    })
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

新建getters.js文件代码如下

onst getters = {
  menuSettings: state => state.common.menuSettings,
  registerType: state => state.user.registerType
  ......
}
export default getters

3、vuex挂载全局（在main.js中加上下面代码）

import store from './store' // 引入vuex
const app = new Vue({
  ...App,
  store
})
app.$mount()

4、mpvue中vuex坑

在正常Vue项目，我们按上面的方式写完后，可以直接用this.$store.state.xxx、this.$store.dispatch 或用辅助函数（mapGetters、mapMutations）来访问或操纵数据仓库中的数据；
但是在mpvue + vuex项目中不能直接使用,必须要把store挂载到vue的原型上**（即在main.js文件加上如下一句代码）**

Vue.prototype.$store = store

5、页面中使用如下图

需要注意，我这里是用modules模块的方式来定义的，并且每块都设置了namespaced: true；所以在页面中使用的时候一定需要加上modules模块名称（如下示例）

this.$store.dispatch('user/getUserInfo')
this.$store.commit('common/SET_MENU_SETTINGS', menuSettings)

源码地址

gitHub地址

码云地址