VUEX 保存信息

VUEX 保存信息

有时候我们在使用vue时，想要保存一些基本信息在用户的浏览器上面，这时就可以选择localStorage,localStorage的信息在不需要时需要手动清除，可能一些只在当前页面用到的信息就可以用vuex啦，每次刷新页面都会刷新里面的信息。

先建个store.js 文件，里面包含你想保存的信息：

import Vuex from "vuex";
import Vue from "vue";
import * as TYPES from "./types";

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        name: "",
        userid: "",
    },
    mutations: {
        [TYPES.SETNAME]: (state, name) => {
            state.name = name;
        },
        [TYPES.SETUSERID]: (state, userid) => {
            state.userid = userid;
        },
    },
    getters: {
        name: state => {
            return state.name;
        },
        userid: state => {
            return state.userid;
        },
    },
    actions: {
        logout(context) {
            context.commit(TYPES.SETNAME, "");
            context.commit(TYPES.SETUSERID, "");
        }
    }
});

然后在main.js 注册好这个组件，

import store from "./store/store";

new Vue({
    el: '#app',
    router,
    i18n,
    store,
    template: '<App/>',
    components: { App },
})

在需要的页面用到时候就直接用就行啦：

这是保存进去：

 this.$store.commit(TYPES.SETNAME, 查询出的信息name);
 this.$store.commit(TYPES.SETUSERID, 查询出的信息useId]);

取出来用：

let name = this.$store.getters.name

vuex 可以配合路由使用，这样可以在每次跳转都对相关信息进行校验或从后台获取跳转页面的相关信息；还可以就行权限认证防止用户跳转到不合法页面。