先看vuex的的用法：

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import { createVuexAlong } from 'vuex-along'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    name: "小强",
    commitName: "小刘"
  },
  mutations: {
    changeCommitName(state, data) {
      state.commitName = data
    }
  },
  actions: {
    changeName({
      state
    }, data) {
      state.name = data;
    }
  },
  plugins: [createVuexAlong({})]
})

vue代码：

<template>
  <div class="hello">
    <h1>hello world</h1>
    <div>
      <div>
        姓名：
        <input type="text" v-model="name">
        年龄：
        <input type="text" v-model="age"> &nbsp;&nbsp;&nbsp;&nbsp;
        <button class="delete" @click="handelAdd()">添加</button>
      </div>
      <div v-for="item of list" :key="item.id">
        姓名：{{item.name}} &nbsp;&nbsp;&nbsp;&nbsp;年龄：{{item.age}}&nbsp;&nbsp;&nbsp;&nbsp;
        <span
          class="delete"
          v-on:click="handelDelete(item.id)"
        >删除</span>
      </div>
    </div>
    <br>
    <div>
      <button @click="handleChangeName()">点击切换名字,下面变为小张（dispatch）</button>
      <div>{{getUserName()}}</div>
      <div>{{dispatchName}}</div>
      <button @click="handleChangeCommitName()">点击切换名字,下面变为小厚(commit)</button>
      <div>{{getCommitName()}}</div>
      <div>{{commitName}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      list: [],
      name: "",
      age: ""
    };
  },
  computed: {
    dispatchName() {
      return this.$store.state.name;
    },
    commitName() {
      return this.$store.state.commitName;
    }
  },
  mounted() {
    console.log(this.$GLOBALcONFIG);
    this.$ajax
      .get(this.$GLOBALCONFIG.webapi + "/test/search", {
        params: {
          type: 1,
          page: 1
        }
      })
      .then(res => {
        console.log(res);
      });

    this.$ajax.get(this.$GLOBALCONFIG.webapi + "/test/list").then(res => {
      console.log(res);
      this.list = res.data.data;
    });
  },
  methods: {
    getCommitName() {
      return this.$store.state.commitName;
    },
    handleChangeCommitName() {
      this.$store.commit("changeCommitName", "commit-小厚");
    },
    handleChangeName() {
      this.$store.dispatch("changeName", "小张");
    },
    getUserName() {
      return this.$store.state.name;
    },
    handelAdd() {
      console.log(this.name);
      const data = {
        name: this.name,
        age: this.age
      };
      this.$ajax
        .get(this.$GLOBALCONFIG.webapi + "/test/add", {
          params: data
        })
        .then(res => {
          this.list = res.data.data;
        });
      this.name = "";
      this.age = "";
    },
    handelDelete(id) {
      this.$ajax
        .get(this.$GLOBALCONFIG.webapi + "/test/delete", {
          params: {
            id: id
          }
        })
        .then(res => {
          this.list = res.data.data;
        });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.delete {
  cursor: pointer;
  &:hover {
    color: red;
  }
}
</style>

这里需要知道的是，dispatch触发的是actions，commit触发的是mutation，dispatch是异步，commit是同步的

但是vuex，页面一刷新，数据就会回到初始状态，在某些功能上面，是不不符合要求的，这里介绍的是vuex-along插件，网址：https://github.com/boenfu/vuex-along

原理：

• 将vuex的state存在localStorage或sessionStorage或cookie中一份
• 刷新页面的一瞬间，vuex数据消失，vuex会去sessionStorage中哪会数据，变相的实现了数据刷新不丢失~

安装：

npm install vuex-along --save

import { createVuexAlong } from 'vuex-along'

export default new Vuex.Store({
  state:{...},
  modules:{...},
  plugins: [createVuexAlong()]
});

Now the plugins has come into effect  / 现在插件已经生效了


Save all state by default to localStorage / 默认保存所有 state 到 localStorage


You can change options to set it / 你可以通过改变 options 来改变保存内容

参考官网：https://github.com/boenfu/vuex-along  有详细的使用方法

源码：其实就是对于localStorage或sessionStorage或cookie的封装