1.vuex状态管理模式

vuex状态管理模式

2.store.js文件结构

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    username: localStorage.getItem('username'),
    username1: localStorage.getItem('username1'),
    tel: localStorage.getItem('tel'),
    warning: localStorage.getItem('warning'),
    selectVal: '1'
  },
  mutations: {
    setUsername (state, val) {
      state.username = val
    },
    setUsername1 (state, val) {
      state.username1 = val
    },
    setTel (state, val) {
      state.tel = val
    },
    setWarning (state, val) {
      state.warning = val
    },
    setSelectVal (state, val) {
      state.selectVal = val
    }
  },
  actions: {

  }
})

3.mutations设置值

this.$store.commit("setUser", data.data);

4.html获取值

<span class="name">{{$store.state.user.name}}</span>

5.js获取值

 console.log(this.$store.state.user)

6.清空vuex的值

logout() {
sessionStorage.clear() this.$router.push('/login') window.location.reload()
},

7.vuex单模块导入

https://blog.csdn.net/memedadexixaofeifei/article/details/106136027

8.vuex异步调用传参

http://blog.sina.cn/dpool/blog/s/blog_e7c615fa0102wmmb.html