找不到任何东西来解决这个看似明显的问题。

刚刚使用 Typescript 从 Vue 2 升级到 Vue 3 和 Vuex。

尽管遵循 Vue 3 说明，但 this.$store 似乎无法访问。

src/components/FlashMessages.vue:28:25 TS2339 中的错误：属性 '$store' 不存在于类型 'ComponentPublicInstance<{}, {}, {}, { getAllFlashMessages(): Word; }, {}, EmitsOptions, {}, {}, false, ComponentOptionsBase<{}, {}, {}, { getAllFlashMessages(): Word; }、{}、ComponentOptionsMixin、ComponentOptionsMixin、EmitsOptions、字符串、{}>>'。

    26 |     computed: {
    27 |         getAllFlashMessages (): FlashType {
  > 28 |             return this.$store.getters.getFlashMessages;
       |                         ^^^^^^
    29 |         },
    30 |     },
    31 | 

主文件

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import …

在撰写本文时，Vue 3.0 已经发布了第一个稳定的v3.0.0 'One Piece' 版本，Vuex 4 处于v4.0.0-beta.4 中。

不幸的是，目前还没有关于如何在 TypeScript 中使用 Vuex 4 模块的官方示例......

作为进一步的要求，我希望在它们自己的文件中存储模块状态、突变、getter 和操作。这使得在这些模块增长时更容易管理代码。

我设法在Github和Codesandbox 中拼凑了一个工作示例存储库。

通过使用这些资源中提供的示例：

• Vuex + TypeScript by Andrew 在 Dev.to
• 要点贾维斯佩雷斯/index.ts
• 回购 andrewvasilchuk/vuex-typescript
• Vue 3 和 Vuex 4：在 Dev.to 中由 Barylski 组合的 useStoreModule
• LogRocket 在 Vuex 中映射的完整指南

但是，仍有一些问题有待解决：

1. 解决依赖循环 linting 错误

目前，模块的index.ts、actions.ts和getters.ts中的类型依赖于RootState从主商店导入。

当使用ESLint Airbnb linting config 时，我遇到了 …

我正在尝试使用组合 API 在 Vue 3 组件中输入提示我的道具。

所以，我这样做：

<script lang="ts">
import FlashInterface from '@/interfaces/FlashInterface';
import { ref } from 'vue';
import { useStore } from 'vuex';

export default {
    props: {
        message: {
            type: FlashInterface,
            required: true
        }
    },
    setup(props): Record<string, unknown> {
            // Stuff
        }
};

我的FlashInterface看起来像这样：

export default interface FlashInterface {
    level: string,
    message: string,
    id?: string
}

除了在这种情况下我收到此错误外，此界面运行良好：

ERROR in src/components/Flash.vue:20:10
TS2693: 'FlashInterface' only refers to a type, but is being used as a value here. …

运行我的应用程序时出现此错误：

警告编译了 1 个警告 11:50:40 PM 在 ./src/store/store.js 中警告“在‘vuex’中找不到导出‘createStore’

我安装了 vuex npm install --save vuex

我正在使用 vue 3

我的 Store.js：

import { createStore } from "vuex";
import Movie from './Modules/Movie'
import post from './Modules/post'



const store = createStore({
    modules: {
        post,
        Movie
    },

   

});

export default store;

我的 main.js：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router'
import store from './store/store.js'
const app = createApp(App);
app.use(store);
app.use(router);

app.mount('#app');

问题

\xe2\x9c\x85 Vue 2： \n计算属性在 vuex 存储突变后更新。

\xe2\x9d\x8c Vue 3： \nvuex 存储突变后计算属性不会更新。

Vuex 4

目的：从 Firestore 获取帖子。添加到“postsArray”。进行突变。

注意：函数“getNextPosts”是从允许无限滚动的（工作）交叉观察器调用的。

const postsArray: Array<string> = [];\nconst vuexStore = createStore({\n  state: {\n    posts: []\n  },\n  actions: {\n    // See https://firebase.google.com/docs/firestore/query-data/query-cursors#paginate_a_query\n    getFirstPosts({ commit }) {\n      const getFirstPosts = async () => {\n        const firstPostsQuery = firestore.collection("posts").limit(3);\n\n        // Get FIRST posts.\n        const firstPosts = await firstPostsQuery.get();\n\n        // Add to postsArray.\n        for (const doc of firstPosts.docs) {\n …

我正在将组件从常规 Vue 3 Composition API 重构为脚本设置语法。初始点：

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { mapGetters } from 'vuex';

export default defineComponent({
  name: 'MyCoolBareComponent',
  computed: {
    ...mapGetters('auth', ['isAdmin']),
  },
});
</script>

当前Vue v3 迁移文档，SFC Composition API Syntax Sugar (<脚本设置>)，链接到此 RFC 页面：https://github.com/vuejs/rfcs/pull/182

使用计算反应性属性只有一个示例：

export const computedMsg = computed(() => props.msg + '!!!')

由于当前没有可用的 Vuex 4 文档提到<scrip setup>，所以我仍然不清楚在使用此语法时应该如何使用？mapGetters或者使用 Vuex 4 解决这个问题的正确方法是什么？

我正在使用 Vue3/Vuex 4/TypeScript。

我正在尝试从我的组件 ( ) 中访问我的类型存储App.vue。

每当我设置时const store = useStore()，store总是会返回为undefined

据我所知，我已经逐字遵循官方Vuex 4 TypeScript 支持文档。

应用程序.ts

import { createApp, Component } from "vue"
import { createWebHistory, createRouter } from "vue-router"
import { store, key } from "./store/store"
import App from "./pages/App.vue"
import Home from "./pages/Home.vue"
import Lookup from "./pages/Lookup.vue"

const About = { template: "<div>About</div>" }

const routes = [
  { path: "/", name: "home", component: Home as Component },
  { …

我目前正在 Storybook 中与 Vuex 作斗争。const store = useStore()我在函数中使用它setup。

但是我没有找到将自定义存储注入组件的方法。

我肯定可以在故事书配置文件中全局注入一个商店，preview.js如下所示：

import { app } from '@storybook/vue3';
import store, { key } from '@/store';

app.use(store, key);

有没有办法为使用组合 API 的组件故事创建自定义存储（useStore() 来访问 Vuex）？

我正在使用 Nuxt 2、Vue 2、Vuex 3、Vuetify 2、vuex-persistedstate 4 和 nuxt-i18n 6。

我设置此插件来保留包含RTL 状态和语言代码的 Vuex 状态：

plugins/persistedState.client.js：

import createPersistedState from 'vuex-persistedstate'
export default ({ store, req, vuetify, $vuetify }) => {
  createPersistedState({
    paths: [
      'app.isRTL',
      'app.langCode'
    ]
  })(store)
}

另外，我编写了一些突变来保存状态中的设置并将主题应用于 vuetify：

store/app/index.js：

export default {
  namespaced: true,
  state: {
    isRTL: false,
    langCode: 'en'
  },
  mutations: {
    setRTL: function (state, isRTL) {
      this.app.vuetify.framework.rtl = isRTL
      state.isRTL = isRTL
  },
    setLangCode: function (state, langCode) {
      this.app.vuetify.framework.lang.current  = langCode …

我正在使用 Vuex 4 学习 Vue 3 并且我坚持使用一些我很确定它很简单但我看不到的东西。

简而言之，我正在尝试设置一些数据，state以便在我的组件中使用它，但它不起作用。

让我向您展示代码：

/// store.js

import { createStore } from 'vuex';
import axios from 'axios';

const store = createStore({
  state: {
    user: {},
    products: []
  },
  mutations: {
    SET_USER: (state, user) => {
      state.user = user;
    },
    SET_PRODUCTS: (state, products) => {
      state.products = products;
    },
  },
  actions: {
    GET_USER: async function ({ commit }) {
      const user = await axios.get('https://coding-challenge-api.aerolab.co/user/me')
      commit('SET_USER', user)
    },
    GET_PRODUCTS: async function ({ commit }) {
      const …