在开发过程中，大家可能会有一个困惑，在使用vuex的时候，每当浏览器刷新页面的时候，数据都会消失，还要重新去请求，那我们怎样去持久化存储我们所需要重复用到的数据呢？
举个栗子，假设有这样的情景，有一个登录界面，我们需要点击登录之后存储用户名和密码，该用户的用户名和密码在以后的操作中都需要用到，
比如：
1、在显示用户信息的时候需要用到用户名
2、在修改密码的时候，我们需要比对密码是否正确需要用到密码

那下面就介绍一个使用的方法：
借助于 vuex-persist 插件
使用npm install vuex-persist -D安装依赖

写入持久化数据

我们可以通过commit提交并写入我们需要持久化存储数据

this.$store.commit("setName", this.name);

在login.vue中

<style lang="less" scoped>
.rememberKey {
  padding-left: 10px;
  font-size: 14px;
}
.form-class {
  width: 88%;
  padding-left: 20px;
}
</style>
<template>
  <Form ref="form" :model="form" :rules="rules" @keydown.enter.native="login" class="form-class">
    <FormItem prop="userName">
      <Input v-model="form.userName" placeholder="请输入用户名">
        <span slot="prepend">
          <Icon :size="20" type="ios-person"/>
        </span>
      </Input>
    </FormItem>
    <FormItem prop="password">
      <Input type="password" v-model="form.password" placeholder="请输入密码">
        <span slot="prepend">
          <Icon :size="20" type="md-lock"/>
        </span>
      </Input>
    </FormItem>
    <FormItem>
      <slide-verify></slide-verify>
    </FormItem>
    <Checkbox v-model="checked">
      <span class="rememberKey">记住密码</span>
    </Checkbox>
    <br>
    <br>
    <FormItem>
      <Button :loading="loading" @click.native.prevent="login(form)" type="primary" long>登录</Button>
    </FormItem>
  </Form>
</template>
<script>
import http from "@/assets/js/http.js";
import SlideVerify from "_c/slide-verify";
export default {
  component: {
    SlideVerify
  },
  data() {
    return {
      // 这里的 checked 表示 记住密码那个 checkbox 的状态
      checked: false,
      // loading 表示点击 登陆 按钮 的加载状态，初始化为 false
      loading: false,
      systemName: "",
      rules: {
        userName: [
          {
            required: true,

            trigger: "blur",
            message: "请输入有效的用户名"
          }
        ],
        password: [
          {
            required: true,
            message: "请输入有效的密码",
            trigger: "blur"
          }
        ]
      },
      form: {
        userName: Lockr.get("userName"),
        password: Lockr.get("rememberKey")
      }
    };
  },
  methods: {
    login(name) {
      this.$refs.form.validate(isValid => {
        if (isValid) {
          const login_params = {
            username: this.form.userName,
            password: this.form.password
          };
          this.$axios
            .post("/api/user/login", login_params)
            .then(res => {
              if (!this.checked) {
                Lockr.rm("userName");
                Lockr.rm("rememberKey");
              } else {
                Lockr.set("userName", this.form.userName);
                Lockr.set("rememberKey", this.form.password);
              }
              this.$store.commit("setUserName", this.form.userName);
              this.$store.commit("setUserPwd", this.form.password);

              this.LoginAuthenrization(res, "main"); // 调用http.js文件中混入的LoginAuthenrization方法，main指向路由name为main的组件
            })
            .catch(err => {
              console.log(err);
            });
        }
      });
    }
  },
  created() {
    this.getUserNameAndRememberKey();
  },
  mixins: [http]
};
</script>

这个是我的vuex存储的目录结构

vuex存储目录.png

在index.js中

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from "vuex-persist";
import state from './state'
import mutations from './mutations'
import actions from './actions'
import user from './module/user'
// import saveInLocal from './plugin/saveInLocal'
Vue.use(Vuex)

const vuexLocal = new VuexPersistence({
  storage: window.sessionStorage
});

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {
    user
  },
  // plugins: [saveInLocal]
  plugins: [vuexLocal.plugin]
})

在user.js中

const user = {
  state: {
    UserName: "",  //用户名
    UserPwd: "",  // 用户密码
    UserInfo: {       // 用户信息

    }
  },
  mutations: {
    setUserName(state, UserName) {
      state.UserName = UserName
    },
    setUserPwd(state, UserPwd) {
      state.UserPwd = UserPwd
    },
    setUserInfo(state, UserInfo) {
      state.UserInfo = UserInfo
    }
  }
}

export default user

获取持久化存储数据

this.$store.state.user.setUserName;

清空持久化数据(创建清除函数[也就是将其数据设置为空])

clearStore(){
    this.$store.commit("setName", '');
}