store布局和定义

store结构

image.png

一级目录下的index.js如下, 引入小STORE:loginInfo.js

import Vue from 'vue'
import Vuex from 'vuex'
// 个人信息
import loginInfo from './modules/loginInfo'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    loginInfo,
  }
})

loginInfo.js

const state = {
  lang: localStorage.getItem("lang") || 'zh', //先去localStorage中获取数据
  myInfo: JSON.parse(localStorage.getItem("myInfo")) || {}, //这里使用JSON.parse是因为我localStorage中保存的是一个对象字符串
}
const mutations = {
  setInfo(state,info){
    localStorage.setItem('myInfo', JSON.stringify(info)); //将传递的数据先保存到localStorage中
    state.myInfo = info;// 之后才是修改state中的状态
  },
  changeLangEvent(state, type) {
    localStorage.setItem('lang', type);
    state.lang = type;
  },

}
const actions = {

}

export default {
  state,
  mutations,
  actions
}

1.state对象配置,是由获取的localStorage赋值的
2.mutations和action使用方式一样,可以选一个.注意的是,方法里面先进行localStorage存储,后给state赋值,最后export default输出三个对象至此就完成store的配置了.之后的使用方式可以看另一篇 mapState和mapActions的使用方式

--by Affandi ⊙▽⊙