vuex 数据持久化插件实现列表页传递数据给详情页

vuex 数据持久化插件实现列表页传递数据给详情页

阅读该文章时我已默认您已经会使用 vuex。

功能分析：详情页数据需要通过列表页传进来，并且传进来的数据在刷新页面后数据不会丢失。

实现思路：vuex 存储数据，vuex-persistedstate 插件完成自动数据持久化

装插件

# 项目中安装 vuex 数据持久化插件
npm i vuex-persistedstate

vuex 存储数据

// src/store/modules/persistedstate.js
const state = {
  info: {}, // 详情信息
}
const mutations = {
  saveInfo(state, payload) {
    state.info = payload
  }
}

export default {
  namespaced: true,
  state,
  mutations
}

vuex 主入口

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import persistedstate from './modules/persistedstate.js'
import createPersistedstate from 'vuex-persistedstate'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    persistedstate
  },
  plugins: [
    createPersistedstate({
      key: 'persistedstate-data', // 本地存储用到的 key
      paths: ['persistedstate'] // 需要存储的模块
    })
  ]
})

export default store

列表页完成持久化存储

// list.vue
<template>
    <!-- 这是我将 elementUI el-table 二次封装后的表格组件 -->
    <Table @cell-dblclick="cellDblclick" />
</template>

<script>
import Table from '@/components/Table'
export default {
  components: { Table },
  methods: {
    // 双击表格每行(因为我这里要做双击进入详情)
    // row 为我双击的这一行的所有数据，elementUI 的表格自带该方法
    cellDblclick(row) {
      // 存入这一行的数据，同时插件会自动帮我们存到本地 localStorage
      this.$store.commit('persistedstate/saveInfo', row)
      this.$router.push({ path: '/detail' })
    }
  }
}
</script>

详情页获取 vuex 数据

// detail.vue
<template>
  <div>
   	 <!-- 略 -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      info: {}
    }
  },
  created() {
    // 获取 vuex 中存储的详情数据，由于插件具有本地存储功能，刷新页面依然可以获取到数据
    this.info = this.$store.state.persistedstate.info
  }
}
</script>

参考文章：
Vuex持久化插件(vuex-persistedstate)-解决刷新数据消失的问题