我正在尝试按照官方 Vee-Validate 指南构建一个多步骤表单向导，它提供的示例可在此处找到。虽然这是有帮助的，我想结合Vuex到这一点，我使用的自定义组件，而不是V型验证的默认<Form/>和<ErrorMessage/>组件。自定义组件在内部不使用 Vee-Validate 默认组件。
然而，这样做给我带来了一些问题。我目前的问题是我不知道如何让我的 Vuex 状态变成 Vee-Validate反应式。
我的主要组件中的文本输入是这样使用的：
<text-input
label="Name"
name="name"
v-model="name"
/>
...
computed: {
...mapGetters({
businessFields: 'business/businessFields',
}),
name: {
get () {
return this.businessFields.name;
},
set (value) {
this.$store.commit('business/setName', value)
}
},
},
这都是根据Vuex 在这里给出的双向计算属性指南。
现在我正在尝试将这些字段合并到之前链接的 Vee-Validate 多表单向导中。我基本上改变了它以在重置和从 Vuex 来回而不是本地值时获取值。像这样：
<!-- FormWizard.vue (from the Vee-Validate example adapted to use Vuex) -->
<template>
<form @submit="onSubmit">
<slot />
<div>
<button v-if="hasPrevious" type="button" @click="goToPrev">
Previous
</button>
<button type="submit">{{ …我是 Vue 新手，遇到错误，不明白为什么以及如何解决这个问题。我得到的控制台中的错误是这样的：无法读取未定义的属性“状态”
我正在使用 vue 版本@vue/cli 4.5.12
这是我拥有的文件：
main.js
import { createApp } from 'vue'
import App from './App.vue'
import router from './router.js'
import {store} from './store.js'
const app = createApp(App)
app.use(router, store)
app.mount('#app')
商店.js
import { createStore } from 'vuex'
const store = createStore ({
state() {
return {
socialIcons: {
github: {
icon: "/../assets/images/Github.svg",
name: "Github",
link: "https://github.com/Roene"
},
linkedin: {
icon: "/../assets/images/LinkedIn.svg",
name: "Linkedin",
link: "https://www.linkedin.com/in/roene-verbeek/"
},
instagram: {
icon: "/../assets/images/Instagram.svg",
name: "Instagram",
link: "https://www.instagram.com/roeneverbeek/" …我对 Vue 非常陌生，并且接到的任务是创建一些可以嵌入到几个现有的非 Vue 遗留 Web 应用程序中的 Vue 小部件。我们的想法是，我们将创建一个这些小部件的库，然后将其嵌入到任何一个遗留应用程序中，最终我们可能会将整个应用程序迁移到 Vue。
我一直在寻找最好的前进方向，但我有点困惑。我想这些是我的问题：
我是否需要在这里考虑 Web 组件，或者小部件可以是我们以某种方式嵌入的实际 Vue 应用程序吗？
如果小部件应创建为 Web 组件，那么使用 Vue/web-component-wrapper 或 vue-custom-element 库有什么区别吗？
无论我们选择哪个选项，我们都可以充分利用您在任何普通 Vue 应用程序中使用的功能 - Vue 路由器、用于状态管理的 Vuex 等（并且状态可以在这些小部件之间共享）吗？
小部件是否需要完全样式化，或者最佳实践是将组件的所有样式留给父应用程序（或两者的组合）？
我以前从未做过这样的事情（你可能会知道！），因此任何指导、建议或示例指示将不胜感激。
** 更新 **
我发现这篇文章是我需要走的方向https://itnext.io/vuidget-how-to-create-an-embeddable-vue-js-widget-with-vue-custom-element-674bdcb96b97
我有一个使用 Vue 3 和 Vuex 的项目。这是我第一次使用 Vue 3。我似乎不知道如何在 Vue 3 项目的 Setup 方法中访问 Vuex。
我有一个特征对象。这是由子组件使用 featureSelected 方法设置的。首先，在我的设置中，我使用 useStore 创建一个存储常量；从 import { useStore } from "vuex";。然后，在 featureSelected 函数内，我调用此存储对象上的调度函数store.dispatch("setPlot", { geometry: newFeature });。
我不断收到错误消息，告诉我存储对象上不存在调度函数：Uncaught TypeError: store.dispatch is not a function。
setup() {
const store = useStore;
const feature = ref();
const featureSelected = (newFeature) => {
feature.value = newFeature;
store.dispatch("setPlot", { geometry: newFeature });
};
return { feature, featureSelected };
},
我如何将 vuex 注入 Vue 3，在 Vue 2 中可能像：
new Vue({
el: '#app',
store: store,
})
但是在 Vue 3 中你会怎么做，因为没有new Vue().
我对所有这些都是新手，现在正在学习 Vue。我已经安装了 Vuex，使用导出默认值，然后导入它，但仍然收到此错误 =>
警告在 ./src/store/index.js 中编译有 1 个警告
警告“在‘vuex’中找不到导出‘createStore’
index.js 存储文件
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import coachesModule from './modules/coaches/index.js';
const store = new Vuex.Store({
modules: {
coaches: coachesModule
}
});
export default store;
package.json 文件
{
"name": "vue-first-app",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-rc.5",
"vuex": "^3.5.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": …我正在使用 TypeScript 和 Vuex4 开发 Vue 3 项目。现在我正在使用 TS 为 vuex 中的每个存储模块使用样板声明方法。看起来像这样：或者如果我的代码可读性不够，这是我用来指导我的：https ://betterprogramming.pub/the-state-of-typed-vuex-the-cleanest-approach-2358ee05d230
//#region Store
export const state: State = {
stateVar: null,
isError: false,
};
export const getters: GetterTree<State, RootState> & Getters = {
getStateVar: state => state.stateVar,
getIsError: state => state.isError,
};
export const mutations: MutationTree<State> & Mutations = {
[ModuleMutationTypes.setStateVar](state: State, payload: StateVarType) {
state.stateVar = payload;
},
[ModuleMutationTypes.setIsError](state: State, payload: boolean) {
state.isError = payload;
},
};
export const actions: ActionTree<State, RootState> & Actions = …尝试 1
主文件
import { createApp } from 'vue'
import { store } from './store/store'
import App from './App.vue'
Vue.config.productionTip = false
const app = createApp(App)
app.use(store)
app.mount('#app')
商店.js
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
patients: []
}
});
尝试 1 错误
Uncaught TypeError: Cannot read property 'use' of undefined
at eval (store.js?07a4:4)
at Module../src/store/store.js (app.js:1342)
尝试 2
主文件
import { createApp } from 'vue'
import { store } …