No puedo encontrar nada para resolver este problema aparentemente obvio.
Acabo de actualizar de Vue 2 a Vue 3 y Vuex con Typescript.
this.$store no parece ser accesible, a pesar de seguir las instrucciones de Vue 3.
ERROR en src/components/FlashMessages.vue:28:25 TS2339: la propiedad '$store' no existe en el tipo 'ComponentPublicInstance<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, ComponentOptionsMixin, ComponentOptionsMixin, EmitsOptions, string, {}>>'.
26 | computed: { 27 | getAllFlashMessages (): FlashType { > 28 | return this.$store.getters.getFlashMessages; | ^^^^^^ 29 | }, 30 | }, 31 |principal.ts
import { createApp } from 'vue' import App from './App.vue' import './registerServiceWorker' import router from './router' import store from './store' import './assets/styles/index.css' const app = createApp(App) app.use(store) app.use(router) app.mount('#app')tienda.ts
import { createStore } from 'vuex' import FlashType from '@/init' export default createStore({ state: { flashMessages: [] as FlashType[], }, getters: { getFlashMessages (state) { return state.flashMessages } },FlashMessages.vue
<script lang="ts"> import { defineComponent } from "vue"; import FlashType from "@/init"; export default defineComponent({ name: "FlashMessages", data () { return {}; }, computed: { getAllFlashMessages (): FlashType { return this.$store.getters.getFlashMessages; }, },init.ts
export type FlashType = { kind: 'success' | 'error'; message: string; time: number; }Cualquier sabiduría apreciada :)
Estructura de archivos
├── .editorconfig ├── client │ ├── babel.config.js │ ├── CONTRACTS.md │ ├── cypress.json │ ├── jest.config.js │ ├── package.json │ ├── package-lock.json │ ├── postcss.config.js │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ └── robots.txt │ ├── README.md │ ├── src │ │ ├── App.vue │ │ ├── assets │ │ │ ├── logo.png │ │ │ └── styles │ │ │ └── index.css │ │ ├── components │ │ │ ├── admin │ │ │ │ ├── AdminAdd.vue │ │ │ │ ├── AdminList.vue │ │ │ │ ├── AdminWord.vue │ │ │ │ ├── EmotionAdd.vue │ │ │ │ ├── EmotionsList.vue │ │ │ │ └── Emotion.vue │ │ │ └── FlashMessages.vue │ │ ├── init.ts │ │ ├── main.ts │ │ ├── registerServiceWorker.ts │ │ ├── router │ │ │ └── index.ts │ │ ├── shims-vue.d.ts │ │ ├── store │ │ │ └── index.ts │ │ └── views │ │ ├── About.vue │ │ ├── Admin.vue │ │ ├── Emotions.vue │ │ └── Home.vue │ ├── tsconfig.json │ └── vue.config.js ├ └── server ├── api ├── api.bundle.js ├── index.ts ├── logger │ └── logger.ts ├── models ├── nodemon.json ├── package.json ├── package-lock.json ├── router │ ├── db.ts │ └── emotions.ts ├── tsconfig.json └── webpack.config.jsEsta es la primera vez que uso correctamente eslint, por lo que no estoy seguro de haberlo configurado correctamente. Terminé con un tsconfig diferente en los directorios /cliente y /servidor.
cliente/tsconfig.json
{ "compilerOptions": { "target": "esnext", "module": "esnext", "strict": true, "jsx": "preserve", "importHelpers": true, "moduleResolution": "node", "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "sourceMap": true, "baseUrl": "./", "types": [ "webpack-env", "jest" ], "paths": { "@/*": [ "src/*" ] }, "lib": [ "esnext", "dom", "dom.iterable", "scripthost" ] }, "include": [ "src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx" ], "exclude": [ "node_modules" ] }Hice lo mismo que mostraron las soluciones anteriores, pero además, creé una propiedad global para la aplicación.
import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; const app = createApp(App); app.config.globalProperties.$store = store; app.use(router).mount('#app');Intenta agregar
app.provide("$store", store); en su archivo main.ts antes de montar. Este método funciona de mi parte y el código final parece
... let app = createApp(App); app.provide("$store", store); app.use(store); app.mount("#app");Tuve un error similar pero en VS Code. A partir de Vuex 4, este es el método preferido:
// vuex-shim.d.ts import { ComponentCustomProperties } from 'vue' import { Store } from 'vuex' declare module '@vue/runtime-core' { // Declare your own store states. interface State { count: number } interface ComponentCustomProperties { $store: Store<State> } }Documentos: https://next.vuex.vuejs.org/guide/migrating-to-4-0-from-3-x.html#typescript-support
Y tuve que deshabilitar y luego habilitar Vetur nuevamente.
Junto al archivo shims-vue.d.ts , cree otro archivo llamado shims-vuex.d.ts con el siguiente contenido:
import { Store } from '@/store';// path to store file declare module '@vue/runtime-core' { interface ComponentCustomProperties { $store: Store; } }Para obtener más información, consulte la sección de soporte de TypeScript para obtener más detalles.
Tuve muchos problemas al intentar configurar vuex con mecanografiado y API de opciones. Independientemente de la API que utilice, le recomiendo encarecidamente que utilice Pinia, ya que es una solución lista para mecanografiar y es muy similar a Vuex.
Para aquellos que usan VS Code y Vue con TypeScript a través de vue-class-component y/o vue-property-decorator , es posible que no sea necesario agregar más declaraciones de tipo. El problema podría resolverse contsconfig.json . Es decir, con su propiedad include .
Verá que falta this.$store si el archivo que está viendo este error no está en la lista de globos en la propiedad de include .
Tenga en cuenta que, como en el código a continuación, si omite tests/.... glob de la matriz de include , aparecerá el error en los archivos que coinciden con este glob. Si vuelve a agregar el globo, el error desaparecerá.
"include": ["src/**/*.ts", "src/**/*.vue", "tests/e2e/.fixtures/**/*.ts"]Vuex no proporciona tipos para esta propiedad. $ store lista para usar. Cuando se usa con TypeScript, debe declarar su propio aumento de módulo. Referencia