vuex的入门使用
需求:
多个页面跳转同一个页面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));
然后对象也可以正常保存读取。