我正在學習 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 中的某些東西，但我不知道是什么。你能告訴我有什么問題嗎？（我希望事情不多:)）/ 有人可以幫助我嗎？請 。
謝謝
uj5u.com熱心網友回復：
看起來./store/index.ts您正在嘗試將函式呼叫的結果匯出到此行上的商店實體中的行中收到錯誤：
export default store();
store 實體確實不是一個函式，您將結果匯入到main.ts. 嘗試只匯出商店實體：
export default store
并且您可能不需要之后的行：
const app = createApp({})
app.use(store)
uj5u.com熱心網友回復：
您收到該錯誤是因為您試圖呼叫一個物件，而不是一個函式。
您的錯誤位于名為./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...
編輯：您在設定選項中也犯了一個錯誤。您應該匯入您已經創建的商店。
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
}
uj5u.com熱心網友回復：
不僅僅是@Lucas David Ferrero 的真正商品答案，我還忘記了 1 件事......在我的 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>非常感謝我的幫手！！
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/342590.html
標籤：javascript 打字稿 Vue.js Vuex 店铺
上一篇：嵌套的v-for回圈不呈現
下一篇：vuejs使用搜索欄過濾