vue3中使用vuex和vue-router的详细步骤

下面是使用Vue3中使用Vuex和Vue Router的详细步骤攻略。

1. 安装Vuex和Vue Router
   使用npm或yarn命令行工具，执行以下命令来安装Vuex和Vue Router:

npm install vuex vue-router

或者

yarn add vuex vue-router

1. 在Vue项目入口文件main.js中引入Vuex和Vue Router，并进行实例化

// main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import store from './store'

const app = createApp(App)
app.use(router)
app.use(store)

app.mount('#app')

1. 创建Vuex store
   创建一个store.js文件，在该文件中引入Vuex，并创建一个新的store实例。

// store.js

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {}
  },
  mutations: {},
  actions: {},
  modules: {}
})

export default store

1. 在Vue Router中配置Vuex store
   在router.js文件中，引入store文件，并将其添加到Vue Router实例中。

// router.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from './views/Home.vue'

import store from './store'

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  // 确认user是否被授权，如果没有授权则进行跳转
  if (!store.state.user) {
    next('/login')
  } else {
    next()
  }
})

export default router

1. 在Vue组件中使用Vuex store
   在组件中使用Vuex store，我们需要进行以下步骤：

2. 导入Vuex store

3. 在computed选项中定义需要使用的state
4. 使用dispatch方法来调用actions等Vuex store中的方法

如下面代码所示：

// UserComponent.vue

<template>
  <div>
    <span>{{user.name}}</span>
    <button @click="logout">Logout</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['user'])
  },
  methods: {
    logout() {
      this.$store.dispatch('logout')
    }
  }
}
</script>

1. 在Vuex store中定义actions和mutations
   在store.js文件中定义actions和mutations，如下所示：

2. mutations：修改state的唯一方法。不能直接调用mutations，而是需要通过commit方法来触发mutations，从而修改state中的数据。

3. actions：用于异步数据操作。需要使用dispatch方法来触发actions方法，actions方法中通常会包含异步的API请求等操作。actions方法通过调用mutations方法来更改state中的数据。

实例：

// store.js

import { createStore } from 'vuex'

const store = createStore({
  state() {
    return {
      user: null
    }
  },
  mutations: {
    setUser(state, user) {
      state.user = user
    },
    clearUser(state) {
      state.user = null
    }
  },
  actions: {
    login({ commit }, user) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          commit('setUser', user)
          resolve()
        }, 1000)
      })
    },
    logout({ commit }) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          commit('clearUser')
          resolve()
        }, 1000)
      })
    }
  },
  modules: {}
})

export default store

这就是使用Vue3中使用Vuex和Vue Router的详细步骤攻略。下面给出两个例子来更好地理解：

• 示例一：

例如，在组件中使用Vuex中的数据，我们可以使用如下方法：

<template>
  <div>
    <h2>{{ $store.state.count }}</h2>
    <button @click="$store.commit('increment')">increment</button>
  </div>
</template>

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

• 示例二：

在Vue Router中使用Vuex中的动态路由：

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
  {
    path: '/profile/:id',
    name: 'profile',
    component: Profile,
    props: true,
    meta: {
      requiresAuth: true
    }
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.state.user) {
      next('/login')
    } else {
      next()
    }
  } else {
    next()
  }
})

在示例二中，我们使用了Vuex中的state数据来判断用户是否已登录，如果未登录，则进行跳转。