使用 vuex 跟踪上次访问页面

Question

我有一个 vue 应用程序，我想以某种方式保存或记住最后访问的页面

vuex-persistentstate

。我想要的是：我有 3 个页面，例如 A、B、C，所有三个页面都指向页面 D，并且页面 D 上有一个“取消/完成”按钮。现在单击它，重定向到主页。但我想返回上次访问的页面，具体取决于我所在的位置（A、B 或 C）。

我想用

vuex-persistentstate

来实现它

到目前为止我已经有了这个。

src/store/index.js

export default createStore({
  plugins: [
    createPersistedState({
      key: 'xx',
      paths: [
        'global.pageAfterFinishClick',
        ...,
      ],
    }),
  ],

这里

src/store/global/index.js

state: {
    pageAfterFinishClick: '/'
...
}

我认为下一步是添加突变和操作并更新我的路由器？

mutations: {
  // Other mutations...
  [SET_PAGE_AFTER_FINISH_CLICK](state, payload) {
    state.pageAfterFinishClick = payload;
  },
}

和

actions: {
  // Other actions...
  setPageAfterFinishClick({ commit }, page) {
    commit(SET_PAGE_AFTER_FINISH_CLICK, page);
  },
}

我在这一步中遇到困难，需要你的帮助。

Answer 1

我就是这样做的：

Vuex 商店

const store = new Vuex.Store({
  state: {
    previousRoute: null,
  },
  mutations: {
    setPreviousRoute(state, route) {
      state.previousRoute = route;
    },
  },
  actions: {
    updatePreviousRoute({ commit }, route) {
      commit('setPreviousRoute', route);
    },
  },
});

然后我更新

router

设置以在发生路线导航时调度

updatePreviousRoute

操作：

const router = new VueRouter({
  mode: 'history',
  routes,
});

router.beforeEach((to, from, next) => {
  // Dispatch action to update previous route
  store.dispatch('updatePreviousRoute', from);
  next();
});

通过此设置，每次发生路线导航时，都会使用之前的路线信息调度

updatePreviousRoute

操作，并使用之前的路线更新 Vuex 存储。

然后我使用

previousRoute

中的

Vuex store

属性向后导航：

methods: {
  onCancelFinishClick() {
    // Navigate to the previous page
    this.$router.push(this.$store.state.previousRoute || '/');
  },
},

这将导航到上一页（如果可用），或者如果没有存储以前的路线，则导航到主页（“/”）。