vuex使用

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'),

                }
            ]

        },

    ],

附：文件夹在资料的快捷方式里面（自用）