Vue3.x使用vuex进行页面间通信

Situation

需求
项目中的一种题目 计算题需要配置特定运行指令，计算题的编辑和新增是同一个页面
基本信息提交、配置指令提交和配置文件上传各是一个接口，一共涉及3个接口
指令提交和文件上传均需要questionId，因此我们设计 第一页进行题目基本信息提交，请求成功后后端返回questionId，我们拿到questionId后 下一步 跳转至 第二页，进行指令的配置
问题
编辑计算题时，第一页基本信息提交后，会覆盖掉我们原来已经上传的配置指令

Task

目的
编辑计算题，第一页基本信息提交后，跳转至第二页，我们还能看到原来的配置指令
所以我们需要在第一页时就将题目的配置指令信息拿到，并存起来，跳转至第二页时，再取出数据并显示

Action

第一种

最开始的思路非常粗暴，直接将计算题的编辑和新增分为2个页面
流程图如下

后面细细一想，这样代码量double，且不利于后期的项目维护
于是，我们考虑使用Vuex

第二种

去简答学习了一下Vuex的用法，使用Vuex在第一页时获取数据并存储在store中，跳转至第二页时我们判断store中是否存在数据，若存在则取出，并显示
流程图如下

Result

store目录下新建一个文件，我们将其命名为question.js，内容如下

import Vue from 'vue'
import Vuex from 'vuex'
import questionApi from '@/api/question'

Vue.use(Vuex)
const state = {
    // 配置指令
    configDetail:{}
}
const mutations = {
//修改store中configDetail状态
    setConfigDetail(state,configDetail){
        state.configDetail=configDetail;
    }
}
const actions = {
    getConfigDetail:({commit},id)=>{
    //    根据id发请求，得到configDetail
        questionApi.calcConfigDetail(id).then(re=>{
            commit('setConfigDetail',re.response);
        })
    },
}
const getters = {}
export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

第一个页面内容

//模板渲染成HTML前调用
created () {
      _this.getConfigDetail(id)
}
//methods中定义方法，question是store新建文件的名字，getConfigDetail在question.js定义
methods(){
	...mapActions('question', {getConfigDetail: 'getConfigDetail'})
}
1
2
3
4
5
6
7
8

第二个页面内容

//计算属性关键词，基于响应式依赖缓存
computed: {
    ...mapState('question', {configDetail: state => state.configDetail})
  },
1
2
3
4

这样在第二个页面我们就能获得configDetail数据了

总结

遇到一些业务逻辑时需要绘制流程图思考
掌握快速学习一项陌生技术的能力
Vuex 官网