uni-app 4.29版本hx无法使用vuex 从vuex导入的useStore函数报错不是一个函数

发布于 1周前 作者 wuwangju 来自 Uni-App

uni-app 4.29版本hx无法使用vuex 从vuex导入的useStore函数报错不是一个函数

项目信息 详情
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 Windows 10 家庭中文版
HBuilderX类型 正式
HBuilderX版本号 4.29
手机系统 Android
手机系统版本号 Android 13
手机厂商 华为
手机机型 荣耀90 gt
页面类型 nvue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

import vuex,{useStore,mapMutations} from "vuex"

setup() {
    const store = useStore()
    console.log("自定义打印：",store,store.state);
    console.log("setup");
    console.log(useStore);
    const test = ref("setup周期测试")
    console.log(vuex);
    console.log(test);
    return {test}
}

操作步骤：

  1. 下载hello-uniapp项目，打开pages/tabBar/componentcomponent.nvue文件
  2. 导入import vuex,{useStore,mapMutations} from “vuex”
  3. 在setup生命周期里
    setup() {
    const store = useStore()
    console.log("自定义打印：",store,store.state);
    console.log("setup");
    console.log(useStore);
    const test = ref("setup周期测试")
    console.log(vuex);
    console.log(test);
    return {test}
}

预期结果：

正常使用vuex里的数据

实际结果：

报错 (0 , import_vuex.useStore) is not a function TypeError: (0 , import_vuex.useStore) is not a function at Proxy.onLoad (pages/tabBar/component/component.js.nvue:260:121) at pages/tabBar/component/component.js.nvue:430:9 at pages/tabBar/component/component.js.nvue:432:3

bug描述：

在setup周期里使用useStore报错： (0 , import_vuex.useStore) is not a function TypeError: (0 , import_vuex.useStore) is not a function at Proxy.onLoad (pages/tabBar/component/component.js.nvue:260:121) at pages/tabBar/component/component.js.nvue:430:9 at pages/tabBar/component/component.js.nvue:432:3


Harmonyos Next教程
4 回复

// 页面路径：main.js
import App from ‘./App’
import store from ‘./store’
import {createSSRApp} from ‘vue’
import Vuex from “vuex”;
export function createApp() {
const app = createSSRApp(App)
app.use(store)
return {
app,
// Vuex // 注意，如果 nvue 使用 vuex 的各种map工具方法时，必须 return Vuex
}
}


这是在hello-uniapp测试useStore时踩了一个坑，nvue页面使用vuex记得在返回Vuex，不然vuex库导出的所有函数都会是undefined

useStore的错误是在nvue页面，可以先改成vue页面

在uni-app 4.29版本中遇到无法使用vuex，并且从vuex导入的useStore函数报错“不是一个函数”的问题，通常可能是由于几个常见的原因导致的。以下是一些可能的解决方案和相关的代码示例，帮助你排查和解决这个问题。

1. 确保Vuex版本正确

首先，确保你安装的Vuex版本与uni-app兼容。uni-app通常支持Vuex 4.x版本。你可以通过以下命令查看和更新Vuex版本：

npm list vuex
npm install vuex@4 --save

2. 正确配置Vuex Store

确保你的Vuex store配置正确。以下是一个基本的Vuex store配置示例：

// store/index.js
import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  },
  getters: {
    count: state => state.count
  }
});

export default store;

3. 在uni-app中引入并使用Vuex Store

确保你在main.js中正确引入了Vuex store，并且使用了createApp方法来创建Vue实例：

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import store from './store';

const app = createApp(App);
app.use(store);
app.mount('#app');

4. 使用useStore钩子

在Vue 3中，你可以使用useStore钩子来访问store。确保你在组件中正确使用了这个钩子：

<template>
  <view>
    <text>{{ count }}</text>
    <button @click="increment">Increment</button>
  </view>
</template>

<script>
import { computed } from 'vue';
import { useStore } from 'vuex';

export default {
  setup() {
    const store = useStore();
    const count = computed(() => store.state.count);
    const increment = () => {
      store.dispatch('increment');
    };

    return {
      count,
      increment
    };
  }
};
</script>

5. 检查导入路径

确保你的导入路径是正确的。如果useStore报错“不是一个函数”，可能是因为导入路径错误或者Vuex没有正确安装。

通过上述步骤，你应该能够解决uni-app中Vuex useStore函数报错的问题。如果问题仍然存在，请检查是否有其他依赖冲突或配置错误。

回到顶部