vue2想要在router 里面使用store

在Vue 2中，在路由器（Router）里使用状态管理库 Vuex 的目的是为了将应用的状态集中管理，以便在整个应用中保持数据的一致性和可复用性。以下是如何在 Vue Router 和 Vuex 配合使用的步骤：

1. **安装依赖**：
首先，确保已经安装了 Vue、Vuex 和 Vue Router。如果还没有，可以分别运行 `npm install vue`、`npm install vuex` 和 `npm install vue-router`。

2. **创建 store**：
创建一个名为 `store.js` 或相似的文件，初始化 Vuex 库并配置 store。例如：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    // 存放需要共享的数据
    user: null,
    messages: []
  },
  mutations: {
    // 更新状态的方法
    setUser(state, user) {
      state.user = user
    },
    addMessage(state, message) {
      state.messages.push(message)
    }
  },
  actions: {
    // 异步操作
    async fetchUser({ commit }) {
      const response = await axios.get('/api/user') // 示例请求
      commit('setUser', response.data)
    }
  }
})

3. **注入 store 到路由组件**：
在每个需要访问 store 数据的路由组件（通常是 `App.vue` 或者嵌套组件）中，使用 `setup()` 函数从 `this.$store` 中获取你需要的数据：

// router-view 组件内
<template>
  <div>
    <h1>User Info</h1>
    {{ user }}
  </div>
</template>

<script>
import { useStore } from '@/store'

export default {
  setup() {
    const store = useStore()
    const user = store.state.user

    return {
      user
    }
  }
}
</script>

4. **通过导航守卫（Navigation Guards）更新 store**：
可以在 `beforeEach` 守卫中处理用户的登录状态变化，确保只有登录用户才能访问某些路由：

router.beforeEach((to, from, next) => {
  const requiredAuth = to.meta.requiresAuth
  if (requiredAuth && !store.state.user.authenticated) {
    // 如果未登录，跳转到登录页面
    next({ path: '/login' })
  } else {
    next()
  }
})