之前的專案中使用過一次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儲存資料