[JavaScript知识库]vuex 数据持久化插件实现列表页传递数据给详情页

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

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

问题分析：一般情况下，从列表页进入详情页只需要携带 id，在详情页通过 id 获取详情数据即可。但是，会存在后端只给一个获取列表页数据的接口，详情页用到的字段，要通过列表数据项获取。而我希望得到的效果是通过不同的列表数据项进入的详情页是该数据项的详情，并且刷新页面数据不会丢失。

实现思路：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>