VueJs 3 - Vuex：未捕获的类型错误：存储不是函数

Posted 2023-03-16

【中文标题】VueJs 3 - Vuex：未捕获的类型错误：存储不是函数

【英文标题】：VueJs 3 - Vuex : Uncaught TypeError: store is not a function

【发布时间】：2021-12-15 08:08:39

【问题描述】：

我正在学习 Vuejs，在我的项目中，自从我尝试使用商店 (VUEX) 以来，我收到了一些警告，但没有显示任何内容

所以我有：

├── index.html
└── src
     ├── views
        └── Feed.vue      
     └──store
       └── index.ts
     ├── App.vue
     ├── main.ts

我的 main.ts 是：

// initialisation des éléments pours VUE
import  createApp  from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";
import axios from 'axios'
import VueAxios from 'vue-axios'


// initialisation des imports pour Font Awesome
import  library  from "@fortawesome/fontawesome-svg-core";
import  faUserSecret  from "@fortawesome/free-solid-svg-icons";
import 
  faSpinner,
  faPaperPlane,
  faHandPeace,
  faSignOutAlt,
  faShieldAlt,
  faUserPlus,
  faImage,
  faEdit,
  faUsersCog,
  faTools,
  faRss,
  faTimesCircle,
 from "@fortawesome/free-solid-svg-icons";
import  FontAwesomeIcon  from "@fortawesome/vue-fontawesome";

// initialisation des imports pour Bootstrap
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap";
import "bootstrap/dist/js/bootstrap.js";

// intégration des icones font awesome à la librairy
library.add(faUserSecret);
library.add(faSpinner);
library.add(faPaperPlane);
library.add(faHandPeace);
library.add(faSignOutAlt);
library.add(faShieldAlt);
library.add(faUserPlus);
library.add(faImage);
library.add(faEdit);
library.add(faEdit);
library.add(faUsersCog);
library.add(faTools);
library.add(faRss);
library.add(faTimesCircle);


// Création de l'app
const app = createApp(App);
  app.use(store);
  app.use(router);
  app.use(VueAxios, axios);
  app.provide('axios', app.config.globalProperties.axios) ;
  app.component("font-awesome-icon", FontAwesomeIcon);
  app.mount("#app");

我的 ./store/index.ts

// Imports 
import  createApp  from 'vue'
import  createStore  from 'vuex'
import axios from 'axios';


//Create Store :

export const store = createStore(

  // Define state
  state () 
    return
      feedList: []
    
  ,

  // Define Actions
  actions: 
    getPosts(  commit  ) 
      axios.get('http://localhost:3001/api/feed')
          .then(feedList => 
            commit('setFeedList', feedList)
      )
    
  ,

  // Define mutations
  mutations: 
    setFeedList(state:any, feedList:any) 
      state.data = feedList
    
  , 

)

我的 ./views/Feed.vue ：

<template>
  <div id="Feed">
    <div id="profil" class="col-12 col-md-3">
      <Cartridge />
    </div>
    <div id="feedcontent" class="col-12 col-md-9">
      <SendPost />
      <div id="testlist" v-for="thePost in feedList" :key="thePost">
         thePost 
    </div>
  </div>
</template>

<script lang="ts">
import Cartridge from '@/components/Cartridge.vue';
import SendPost from '@/components/SendPost.vue';
import  computed  from 'vue'
import  useStore  from 'vuex'

export default 
  name: 'Feed',
  components: 
    Cartridge,
    SendPost
  ,

  setup () 
    const store = useStore();

    const feedList = computed(() => store.state.data.feedList);
    console.log("feedList > " + feedList.value);
    return 
      feedList
    
  ,

</script>

<style lang="scss">
@import "../scss/variables.scss";

#profil 
  position: fixed;
  margin: 0;
  height: 100%;


#feedcontent 
  position: fixed;
  height: 100%;
  right: 0;
  background-color: $groupo-colorLight1;
  overflow-y: scroll;

  ::-webkit-scrollbar 
    width: 8px;
    color: $groupo-color1;
  

  ::-webkit-scrollbar-track 
    background: $groupo-colorLight2;
    width: 20px;
    -webkit-box-shadow: inset 0 0 6px rgba($groupo-color4, 0.3);
  

  ::-webkit-scrollbar-thumb 
    background: $groupo-color4;
  

  ::-webkit-scrollbar-thumb:hover 
    background: $groupo-color1;
  

</style>

看起来我不了解 Vuex 中的某些内容，但我不知道是什么。你能告诉我有什么问题吗？ （我希望事情不多:)）/有人可以帮助我吗？请。

谢谢

【参考方案1】：

看起来您从./store/index.ts 中的行中收到错误，您在该行中尝试将函数调用应用到该行的商店实例的结果导出：

export default store();

商店实例确实不是一个函数，您将结果导入到您的main.ts 中。尝试仅导出商店实例：

export default store

也许你不需要在那之后的行：

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

【讨论】：

谢谢 :) 我用这些答案编辑了代码，但仍然有错误。你知道为什么吗？

【参考方案2】：

你得到这个错误是因为你试图调用一个对象，而不是一个函数。

您的错误位于名为 ./store/index.ts 的文件中。你在这里犯了2个错误。第一个是您尝试调用createStore 两次。第二个是您正在尝试从您的商店创建另一个应用程序。

在这里我与您分享修复。

// createStore() retuns an object that you the pass it in your main.ts.
const store:any = createStore(
  // all your store definitions...
)

在同一个文件的末尾，你应该只导出createStore()返回的对象，这样你就可以在app.use()注册它（位于main.ts中）。

export default store
// remove the code bellow...

编辑： 您在 setup 选项中也犯了一个错误。您应该导入您已经创建的商店。

import  store  from 'path/to/your/store/index.ts'
setup () 
    const myStore = store

    // property data doesn't exist in your state.
    const feedList = computed(() => myStore.state.feedList);
    console.log("feedList > " + feedList.value);
    return 
      feedList
    

【讨论】：

感谢您的回答。但是当我下线时： const app = createApp() app.use(store) ... 是一样的。所以我试着写：export default store( // all the store definitions .... ) 但我有一个新错误：src/store/index.ts:9:16 TS2304: 找不到名称'store'。 7 | //创建商店：8 | > 9 | export default store( | ^^^^^ 10 | 11 | // 定义状态 12 | state () 所以我没看懂。

那是因为您正在尝试所谓的命名导出。应该是：export const store( // all the store definitions .... )。然后在您的 main.ts 中，导入更改为：import store from "./store";

好的，谢谢。但是现在，使用 export const store( .... // all the store definition ) ，我有一个语法错误：“常量声明”需要一个初始化值。 (3:18) 1 |从'axios'导入axios； 2 | //创建商店：> 3 |导出常量存储； | ^ 4 | ( 5 | // 定义状态 6 | state()

别忘了等号：export const store = createStore( //store definitions )

是的，但是使用 export const store = createStore( //store definitions )，它不起作用。我仍然有同样的错误：Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'feedList')

【参考方案3】：

除了@Lucas David Ferrero 的真正商品答案之外，我忘记了一件事......在我的 Feed.vue 中：安装商店！ 所以我的文件现在是：

<template>
  <div id="Feed">
    <div id="profil" class="col-12 col-md-3">
      <Cartridge />
    </div>
    <div id="feedcontent" class="col-12 col-md-9">
      <SendPost />
      <div id="testlist" v-for="thePost in feedList" :key="thePost">
         thePost 
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import Cartridge from '@/components/Cartridge.vue';
import SendPost from '@/components/SendPost.vue';
import  computed  from 'vue'
import  store  from '../store/index'


export default 
  name: 'Feed',
  components: 
    Cartridge,
    SendPost,
  ,

  setup() 
    const myStore: any = store

    const feedList = computed(() => myStore.state.feedList);
    console.log("feedList > " + feedList.value);
    return 
      feedList
    ;
  ,

  mounted() 
    const myStore: any = store
    myStore.dispatch("getPosts");
  

</script>

<style lang="scss">
@import "../scss/variables.scss";

#profil 
  position: fixed;
  margin: 0;
  height: 100%;


#feedcontent 
  position: fixed;
  height: 100%;
  right: 0;
  background-color: $groupo-colorLight1;
  overflow-y: scroll;

  ::-webkit-scrollbar 
    width: 8px;
    color: $groupo-color1;
  

  ::-webkit-scrollbar-track 
    background: $groupo-colorLight2;
    width: 20px;
    -webkit-box-shadow: inset 0 0 6px rgba($groupo-color4, 0.3);
  

  ::-webkit-scrollbar-thumb 
    background: $groupo-color4;
  

  ::-webkit-scrollbar-thumb:hover 
    background: $groupo-color1;
  

</style>

非常感谢我的助手！！