vue3中router路由及vuex的store如何使用

这篇"vue3中router路由及vuex的store如何使用"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"vue3中router路由及vuex的store如何使用"文章吧。

vue3 router路由及vuex store使用

1.路由

2.vuex

创建store

import { createStore } from 'vuex'import login from './login'const store = createStore({  state: {},  mutations: {},  actions: {},  modules: {    login  }})export default store

组件内使用store

vue3中router路由和vuex的store使用,获取对象基本使用

vue3中router和store使用方法

因为在vue3的setup内不能使用this对象，所有所有直接通过this来访问的方法都不能使用了。

那么在vue3中怎么访问this.r o u t e r 或 者 t h i s . router 或者 this.router或者this.route呢？

记住一条规则：vue3中基本上所有通过this来访问的对象都换成useXxx的方式来获取。

比如说router，可以通过useRouter和 useRoute来获取router，route对象

1、企业开发Router全局配置

企业开发中在src/router/index.js中全局配置，并在main.js中添加到Vue对象

import { createRouter, createWebHistory } from "vue-router";// 路由规则const routes = [  {    path: "/",    name: "主页",    meta: ["istabbar"],    component: () => import("../views/Home.vue"),  },];//根据路由规则创建路由const router = createRouter({  history: createWebHistory(""),  routes,});export default router;

在main.js中添加到Vue对象

import { createApp } from "vue";import App from "./App.vue";import router from "./router"; // 添加路由router引入// 创建VUE对象createApp(App)  .use(router) // 使用.use(router)添加路由router  .mount("#app");

配置完后就可以全局使用了

1.1、Router获取及使用

先引入vue-router，再获取对象：

import { useRouter } from "vue-router";const router = useRouter();

但是这也不是唯一的方法，传统的和VUE3的使用方法如下：

这里提供了三种方法用于获取 router 对象

1.2、Route获取及使用

先引入vue-router，再获取对象：

import { useRouter } from "vue-router";const router = useRouter();

但是这也不是唯一的方法，传统的和VUE3的使用方法如下：

这里提供了三种方法用于获取 router 对象

2、企业开发Store全局配置

企业开发中在src/store/index.js中全局配置，并在main.js中添加到Vue对象

import { createStore } from "vuex";//创建存储对象export default createStore({  // 需要存储的值都放在这里面  state() {    return {      count: 0,    // 在视图中通过$store.state.count来获取    };  },  // 在其他视图中通过 $store.commit('setState', 10) 使用，用于修改stor存的值  mutations: {    setState(state, count) {    // 只能接受两个参数，用于修改store存的值      state.count = count;    },  },  // 相当于组件的计算属性 通过 $store.getters.doubleCount 获取计算后的值  getters: {    doubleCount(state) {      return state.count * 2;    },  },  // 异步任务 不会改变state 通过 $store.dispath('doubleCount') 使用  actions: {    doubleCount(context) {      context.commit("doubleCount");    },  },  // store的下级store 方便大型项目复杂数据管理，这里面相当于可以在放置一个和外面这些一样的模块  modules: {},});

在main.js中添加到Vue对象

import { createApp } from "vue";import App from "./App.vue";import router from "./router"; // 添加路由router引入import store from "./store"; // 添加全局存储vuex引入// 创建VUE对象createApp(App)  .use(router) // 使用.use(router)添加路由router  .use(store) // 使用.use(store)添加全局存储vuex  .mount("#app");

配置完后就可以全局使用了

2.1、Store获取及使用

先引入vuex，再获取对象：

import { useStore } from "vuex";const store = useStore();

这里提供了三种方法用于获取 router 对象

功能快捷键

• 撤销：Ctrl/Command + Z

• 重做：Ctrl/Command + Y

• 加粗：Ctrl/Command + B

• 斜体：Ctrl/Command + I

• 标题：Ctrl/Command + Shift + H

• 无序列表：Ctrl/Command + Shift + U

• 有序列表：Ctrl/Command + Shift + O

• 检查列表：Ctrl/Command + Shift + C

• 插入代码：Ctrl/Command + Shift + K

• 插入链接：Ctrl/Command + Shift + L

• 插入图片：Ctrl/Command + Shift + G

• 查找：Ctrl/Command + F

• 替换：Ctrl/Command + G

以上就是关于"vue3中router路由及vuex的store如何使用"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。