在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

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

2. 在方法中使用

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

三、改进版

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

四、参考

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

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

你可能感兴趣的:(javascript)