之前的项目中使用过一次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保存数据
