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));

然后对象也可以正常保存读取。

猜你喜欢