需求:
多个页面跳转同一个页面A,在页面A获取到一组数据的后返回上一页,然后把获取到的数据传回去。
问题:
1.刚开始用路由来做,直接用的vue-router中的返回上一页方法,但是发现无法带参返回上一页
2.由于是多个页面异步的跳转同一个页面,所以返回的页面路由不确定,在页面A用带参路由跳转的方法不可行,还需要额外判断上一页的路由名称
解决方案:
vuex状态管理,将需要从A页面传回的数据先保存在vuex中,然后返回到上一页之后再从vuex中把数据取出来
具体实现:
1.先上一个vuex的文档,在使用之前了解一下vuex. vuex文档
2.如果没有安装,需要先安装
npm install --save vuex
3.安装之后引入,然后其他概念类的东西需要自己去搞清楚
import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex)
4.vuex中的代码方法,当然这个需要引入,
const state = { unitInfo:{ unitId: "",//门店id unitName: "",//门店名称 } }; const getters = { getUnitFn(state){//获得存贮在vuex中数据的方法 return state.unitInfo; } }; const mutations = { // state指的是state的数据 // unitId传递过来的数据 setInfo(state, unitInfo){ state.unitInfo= unitInfo;//将传参设置给state的unitId } }; // actions不做统一处理,因为大多数情况下,并不需要使用异步设置值 // 若需要使用actions,注意:mutation_type的命名规则为set开头加上state对象属性的camel形式 // const actions = { // async setIncrement({ commit }, value) { // commit('setIncrement', await value); // }, // }; const actions = {//api接口相关 异步操作需要 setInfoState({commit, state},unitInfo){ commit("setInfo", unitInfo); } };
这个存数据就是通过actions里面的方法,提交一个commit,然后将数据存在vuex中,再通过getters里面的方法将数据取出来
5.需要保存数据的页面写法
this.$store.dispatch("setInfoState", unitInfo)
这里面的setInfoState就是写在vuex中actions中的方法,然后unitInfo就是我需要保存的数据
6.需要用到保存数据的页面方法
vm.unitInfo = vm.$store.getters.getUnitFn;
这样就可以获取到保存在vuex中的数据了
但是像我上面这样获取数据的时候,会有问题,当你保存的是一个string或者number的时候不会有问题,但是可以看到我保存的是一个对象,那么就会出现报错如下:
虽然数据可以正常获得,但就是会报错, Do not mutate vuex store state outside mutation handlers.
找了一下原因,我在改变state 的值的时候都是commit中的,应该是传了对象的原因,对象传的都是引用,所以在传对象的时候需要用es6的方法object.assign(obj)深拷贝方法,在传值的时候,将对象复制一份出来,这样就不会报错了,修改代码如下:
let unitInfo ={}; this.$store.dispatch("setInfoState", Object.assign(unitInfo,this.unitInfo));
然后对象也可以正常保存读取。