前端vue2.6升级至vue2.7后如何使用旧版本vue-router与vuex，并且修改vuex

段友吊缠腰

已于 2022-10-12 10:54:56 修改

阅读量4k

点赞数

分类专栏： vue 前端文章标签： vue.js 前端 javascript

于 2022-08-15 15:43:35 首次发布

本文链接：https://blog.csdn.net/qq_43586648/article/details/126348027

版权

vue 同时被 2 个专栏收录

29 篇文章 2 订阅

订阅专栏

前端

25 篇文章 0 订阅

订阅专栏

1.访问

utils下新建 vueApi.js

import { getCurrentInstance } from "vue";

// 访问vuex
export const useStore = () => {
  const vm = getCurrentInstance();
  if (!vm) throw new Error("must be called in setup");
  return vm.proxy.$store;
};
// 访问router
export const useRouter = () => {
  const vm = getCurrentInstance();
  if (!vm) throw new Error("must be called in setup");
  return vm.proxy.$router;
};
// 访问route
export const useRoute = () => {
  const vm = getCurrentInstance();
  if (!vm) throw new Error("must be called in setup");
  return vm.proxy.$route;
};

使用

import { computed, onMounted } from "vue";
import { useStore, useRouter, useRoute } from "vueApi.js";

const message = computed(() => {
  return useStore().state.message;
});
onMounted(() => {
  // console.log(useRoute());
  // console.log(message.value);
  // useStore().commit("showErrMsgFun", "123123");
  // useRouter().push("/MigrationNotifications");
});

2.修改vuex

import store from "@/views/home/list/store.js";

const setUserName = (name) => {
  // 在vue2.7里如何使用composition Api修改vuex... 
  store.state.user.name = name;
};