在mpVue微信小程序中应用Vuex

记录我在实践中遇到的问题和学习到的东西(●'◡'●)

一、准备store

1. 在main.js中引入store

• 项目目录结构大概是这样的：

• 这里要注意的是，引入之后，把它绑定到全局，那么在所有的组件中就可以用this.$store.state来访问store里的state了。

2. store.js大概长这样

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    userInfo: null,     // 用户信息
    locationInfo: null  // 位置信息
  },
  mutations: {

    /**
     * 存储用户信息
     * @param state
     * @param userInfo
     */
    setUserInfo: (state, userInfo) => {
      state.userInfo = userInfo
    },

    /**
     * 存储位置信息
     * @param state
     * @param locationInfo
     */
    setLocationInfo: (state, locationInfo) => {
      state.locationInfo = locationInfo
    }
  },
  actions: {
    
  }
})

export default store  // 别忘了这一行

复制代码

二、使用

1. 在组件的computed中返回state

• 我这里用到了mapState和mapMutations，直接import { mapState, mapMutations } from 'vuex'import进来。

2. 在方法中使用

this.setUserInfo(loginRes.data)       // 将用户信息存储到store中, loginRes.data是传的参数
复制代码

三、改进版

网上很多人推荐这样子写，会方便管理，我后期也打算这样做

四、参考

mpvue中配置vuex并持久化到本地Storage

转载于:https://juejin.im/post/5c909469518825638621a6a2