uni-app v2 用了Vuex.Store在 nvue 报 Uncaught TypeError: (0 , _vue.effectScope) is not a function

uni-app v2 用了Vuex.Store在 nvue 报 Uncaught TypeError: (0 , _vue.effectScope) is not a function

开发环境 版本号 项目创建方式
Windows w10 HBuilderX

示例代码：

import Vue from "vue";
import Vuex from "vuex";

import createPersistedState from "vuex-persistedstate";
// npm install --save vuex-persistedstate 

Vue.use(Vuex);

import user from "./api/user";

export default new Vuex.Store({
plugins: [
createPersistedState({
storage: {
getItem: key => uni.getStorageSync(key),
setItem: (key, value) => uni.setStorageSync(key, value),
removeItem: key => uni.removeStorageSync(key)
},
paths: ['user'] //打包后
// paths: ['user'] //本地调试
})
],
modules: {
user
}
});

操作步骤：

执行

预期结果：

无报错

实际结果：

Uncaught TypeError: (0 , _vue.effectScope) is not a function

bug描述：

v2 用了Vuex.Store在 nvue 报 Uncaught TypeError: (0 , _vue.effectScope) is not a function


更多关于uni-app v2 用了Vuex.Store在 nvue 报 Uncaught TypeError: (0 , _vue.effectScope) is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

真相只有一个，vuex版本太高 yarn add vuex@3.6.2 | npm i vuex@3.6.2 安装后正常

更多关于uni-app v2 用了Vuex.Store在 nvue 报 Uncaught TypeError: (0 , _vue.effectScope) is not a function的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在 uni-app 中使用 Vuex 时，如果在 nvue 页面中遇到 Uncaught TypeError: (0 , _vue.effectScope) is not a function 错误，通常是因为 nvue 页面使用了不同的渲染引擎（如 Weex），而 Vue 3 的某些特性（如 effectScope）在这些环境中不被支持。

解决方案

  1. 检查 Vue 和 Vuex 版本：

    • 确保你使用的 Vue 和 Vuex 版本是兼容的。Vue 3 和 Vuex 4 是配套的，而 Vue 2 和 Vuex 3 是配套的。
    • 如果你使用的是 Vue 2，确保没有错误地引入了 Vue 3 的 API。

  2. 在 nvue 页面中使用 Vue 2：

    • nvue 页面默认使用的是 Vue 2 的运行时，因此如果你在 nvue 页面中使用 Vue 3，可能会出现兼容性问题。
    • 如果你需要在 nvue 页面中使用 Vuex，建议使用 Vue 2 和 Vuex 3。

  3. 全局使用 Vue 2：

    • 如果你的项目不需要 Vue 3 的特性，可以考虑全局使用 Vue 2 和 Vuex 3，以确保在 nvue 页面中也能正常工作。

  4. 使用 uni.$on 和 uni.$emit 替代 Vuex：

    • 如果你只在小范围内需要共享状态，可以考虑使用 uni.$on 和 uni.$emit 来替代 Vuex，这样可以避免兼容性问题。

  5. 检查第三方库：

    • 确保你使用的第三方库（如 Vuex）与 Vue 3 和 nvue 环境兼容。

示例：在 nvue 页面中使用 Vuex 3

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

export default store;

// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';

Vue.config.productionTip = false;

const app = new Vue({
  store,
  ...App
});
app.$mount();
回到顶部