Vuex 存储登录信息
建立Index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app
},
getters
})
export default store
建立Modules.js
/*
* @Author: your name
* @Date: 2021-10-21 09:40:10
* @LastEditTime: 2021-10-21 10:38:09
* @LastEditors: your name
* @Description:
* @FilePath: \测试线上地址切换等\src\store\modules.js
* 可以输入预定的版权声明、个性签名、空行等
*/
const state = {
user: ''
}
const mutations = {
getUser(state, user_info) {
state.user = user_info
}
}
const actions = {
getUsertxt({ commit }, data) {
return new Promise((resolve, reject) => {
commit('getUser', data)
// localStorage.setItem('userInfo', JSON.stringify(state.userInfo))
resolve()
reject()
})
}
}
export default { //导出
state,
mutations,
actions
}
建立Getter.js
const getters = {
userinfo: state=>state.app.user
}
export default getters
存 this.$store.dispatch("getUsertxt", "fgfffffff");
取
import { mapGetters } from "vuex";
computed: {
...mapGetters(["userinfo"]),
},
mounted() {
console.log(555);
console.log(this.userinfo);
},
方法1 import plugins from "vuex-persistedstate"; //保证刷新不消失
// plugins: [plugins()]
方法2 使用嵌套路由(将初始路由指向一个文件,然后重定向出去,这样就可以每次都会触发哪个文件,文件中取触发vuex存储 ,切记嵌套路由需要一个<router-view></router-view>)
routes: [
{
path: '/',
component: () => import('@/view/layui.vue'),
children: [
{
path: 'home',
// component: () => import('@/view/layui.vue'),
component: () => import('@/view/home.vue'),
}
]
},
],
附:文件夹在资料的快捷方式里面(自用)