vuex存储保存数据、使用数据，超详细解说

之前的项目中使用过一次vuex搭配localstorage存储token，使token持久化保存。
好长时间不用，又把vuex的使用忘的一干二净，重新百度搜索，自己尝试后实现需求。
我的业务需求是父页面中嵌套了一个子页面，父页面的一个卡片列表区域通过点击卡片项跳到子页面，原先子页面有返回按钮，现在取消子页面的返回按钮，在父页面通过点击菜单项实现返回。
子页面需要填报数据，如果有正在编辑的内容未保存，点菜单项的时候还要有提醒的弹窗提醒用户是否离开。
所以我需要用vuex保存用户填报的结果，如果vuex保存的内容和上一次保存的内容不一样，代表用户输入了内容，通过这个来判断是否有未完成的操作。
总结如下：
1、在main.js中

import store from './store'

new Vue({
  router,
  store,
  created: bootstrap,
  render: h => h(App)
}).$mount('#app')

2、src目录下新建store文件夹，–index.js中
state中定义数据，你想保存什么样的数据，就定义成什么样。比如空字符串或者对象，因为我需要保存的是一个数组，所以我这里定义了一个空数组，mutations中操作state的数据，mutations中定义一个更新数据的方法，第一个参数必须是state，第二个参数是接受的参数

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    saveAllList:[]
  },
  mutations: {
   updateData(state,data){
     state.saveAllList = data
   }
  },
  actions: {

  },
  getters
})

3、去要保存数据的页面，通过‘this.$store.commit(‘在vuex的mutation中定义的方法名’，这个页面上我们要保存的数据) ’获取数据

data() {
    return {
      saveAllList: [], //批量保存数组
      }）
//失去输入框焦点
    inputonBlur(e) {
      if (!e.target.value.trim()) return // 优化防止没输入内容也调接口
      this.saveAllList.push({
        fPkDataId: this.fPkDataId,
        fVcContent: e.target.value
      })
      //我在这个事件里获取到  this.saveAllList，调用this.$store.commit把数据存入vuex中
      this.$store.commit('updateData', this.saveAllList)

    },

4、vuex存储数据后，在需要使用的页面调用数据，首先在data中定义一个空数组，还是叫同一个名。

data() {
    return {
      saveAllList: [], //批量保存数组
      }）

在created中赋值

created() {
   this.saveAllList = this.$store.state.saveAllList
  },

然后在methods，我们需要用到的事件中使用。
判断我们从vuex拿的数据是否等于vuex中保存的数据，如果一致，直接返回。如果不一致，出现confirm弹窗，这个地方要注意一下，我用的是antd-design-vue的框架，内部this访问不到，要let 声明一下。onOk是confirm自带的确认事件，当用户点确认之后，要把vuex中保存的数据重置为原来的状态，不然我们点其他菜单项的时候会一直出现弹窗提示有未保持数据项。

  // 获取右侧卡片，获取列表的方法抽离出去了
    getrightcard(item) {
     this.getListData()
      this.getTopBtnData();
         if(this.saveAllList!==this.$store.state.saveAllList){
           let that = this;
         this.$confirm({
        title: '提示',
        content: '你有未保存数据项, 是否确认离开? ?',
        okText: '确认',
        cancelText: '取消',
        onOk (){
      that.$store.commit('updateData', that.saveAllList)
          that.defaultFlag = 'first'
        }
      })
      }else{
        this.defaultFlag = 'first'
      }
    },

好了，最后总结一下
state定义数据，mutation中定义方法操作数据
this.$store.commit保存数据