面试题：Vue中Vuex与Router结合实现简单路由状态管理

1. Vuex 相关设计

状态 (state)

在 store.js 中定义状态：

const state = {
  counter: 0
}

变更 (mutations)

定义用于更新计数器的 mutation：

const mutations = {
  increment (state) {
    state.counter++
  },
  setCounter (state, value) {
    state.counter = value
  }
}

行动 (actions)

可以定义一个 action 来异步更新计数器（这里简单示例，实际根据需求可能不需要异步操作）：

const actions = {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

Vuex 整体配置

整合以上内容，完整的 store.js 如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  counter: 0
}

const mutations = {
  increment (state) {
    state.counter++
  },
  setCounter (state, value) {
    state.counter = value
  }
}

const actions = {
  incrementAsync ({ commit }) {
    setTimeout(() => {
      commit('increment')
    }, 1000)
  }
}

export default new Vuex.Store({
  state,
  mutations,
  actions
})

2. Router 相关配置

路由配置

在 router.js 中配置两个路由 Home 和 About：

import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

Home 组件中使用 Vuex

在 Home.vue 中：

<template>
  <div>
    <p>计数器: {{ $store.state.counter }}</p>
    <button @click="$store.commit('increment')">增加计数器</button>
  </div>
</template>

<script>
export default {
  name: 'Home'
}
</script>

<style scoped>

</style>

About 组件与 Vuex 数据保持

About.vue 组件虽然没有直接操作计数器，但由于 Vuex 的状态共享，当从 Home 切换到 About 再切换回 Home 时，计数器的值会保持不变。

<template>
  <div>
    <p>这是 About 页面</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style scoped>

</style>

这样，通过 Vuex 管理计数器状态，在路由切换时就可以保持计数器的值。

星途面试题库