// store/index.js
import page1 from "./modules/page1.js";
import page2 from "./modules/page2.js";
import page3 from "./modules/page3.js";
import page4 from "./modules/page4.js";
import page5 from "./modules/page5.js";

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  modules: { // 每个路由对应的 module
    page1,
    page2,
    page3,
    page4,
    page5
  },
  plugins: __DEV__ "htmlcode">

// store/modules/page1.js
const state = {
   // 列表数据
   page1Data: [],
   // 标题数据
   page1Title: ''
}



这些数据是通过调用后端 api 返回并复制的数据，如果我们在路由改变的时候重置这些数据，那么需要将初始化数据提取出来，并且暴露一个需要重置的标识方法 initState() ，代表路由改变的时候需要重置，当然这个方法名称是个约定，你也可以定义为其他名称。改造后为：


// store/modules/page1.js
// 放置你要重置的数据
const initState = {
  page1Data: [],
}

// state
const state = {
  // 参数解构
  ...initState,

  // 路由改变不想重置的数据
  page1Title: '',
  initState(){
    return initState
  }
}




全局 module 配置
定义全局 mutation 事件类型


// store/types.js
export const RESET_STATES = 'resetStates'



定义全局 mutation


// store/mutation.js

import * as types from './types'

// 检测所有的 state 并把 `initState()` 中的属性重置
function resetState(state, moduleState) {

  const mState = state[moduleState];

  if (mState.initState && typeof mState.initState === 'function') {

    const initState = mState.initState();

    for (const key in initState) {

      mState[key] = initState[key];
    }
  }

}

export default {

  [types.RESET_STATES](state, payload) {

    for (const moduleState in state) {

      resetState(state, moduleState);
    }
  },

}




定义全局 action


// store/action.js
import * as types from './types'

export default {
  // rest state action
  resetStates:function (context, payLoad) {

    context.commit(types.RESET_STATES, payLoad);
  }
}




路由切换触发重置方法
至此一切准备就绪，只需要在路由改变时触发重置的方法即可，在入口 vue 文件中处理


// components/app.vue
<script>
  import {mapState, mapActions} from "vuex"
  export default{

    methods: {

      ...mapActions({
        resetStates: "resetStates"
      })
    },

    watch: {

      $route(to, from) {
        // 路由改变发起重置
        this.resetStates();
      }
    }
  }
</script>




如果你的 chrome 浏览器安装了vuejs-devtools 在路由切换的时候就能够很清晰的看到上一个路由数据的的重置过程。
总结
实例点这里 。我们这里的 vuex 状态重置，是每次路由切换遍历所有的 store 中的状态，并把 initState() 中的属性重置，如果能做到把当前的路由对应的 state 重置就更好了，但是路由和 store 中的 module 并没有关联关系。这里只是提供一种重置 vuex 状态的一种方案，如果有更好方案还请各位看官留言。如有不妥的地方也欢迎拍砖留言。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。