我在使用组合 API 在 vue 3 中双向绑定反应式组件时遇到问题。

设置：

父调用代码是：

<template>
  <h1>{{ message.test }}</h1>
  <Message v-model="message" />
</template>

<script>
import Message from '@/components/Message.vue';
import { reactive } from 'vue';

export default {
  name: 'Home',
  components: { Message },

  setup() {
    const message = reactive({ test: '123' });

    return {
      message
    };
  }
};
</script>

子组件代码为：

<template>
  <label>
    <input v-model="message" type="text" />
  </label>
</template>

<script>
import { computed } from 'vue';

export default {
  props: {
    messageObj: {
      type: Object,
      default: () => …

我正在尝试使用组合 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. …

通过选项 API，我们可以使用这些方式来扩展组件。假设我们有 2 个组件。

组件1.vue

<script>
export default {
  methods: {
    init(message) {
      alert(message)
    }
  }
}
</script>

Component2.vue

<script>
    import Component1 from './Component1'
    
    export default {
      extends: Component1,
      methods: {
        showAlert() {
          // we can access Component1 'init()' method here
          this.init('Hello World!')
        }
      },
      mounted() {
        this.showAlert()
      }
    }
</script>

现在，如何让它与组合 API 一起工作？我已经检查过该extends属性在文档中仍然可用，但没有明确的使用说明。

https://v3.vuejs.org/api/options-composition.html#extends

考虑以下带有组合 API 的代码。

组件1.vue

<script>
import { defineComponent, ref } from 'vue'

export default defineComponent({
  setup () {
    const init = (message) => …

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

警告编译了 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.js 版本 3 上传文件。

我可以导入ref，但不确定如何使用它来获取文件数据？

文件上传测试.vue

<template>
<h1>File Upload</h1>
<div class="container">
    <div>
      <label>File
        <input type="file" id="file" ref="file" v-on:change="onChangeFileUpload()"/>
      </label>
        <button v-on:click="submitForm()">Upload</button>
    </div>
  </div>
</template>

<script src="./FileUploadTest.ts" lang="ts"></script>

文件上传测试.ts

import { Options, Vue } from "vue-class-component";
import { ref } from 'vue';
import axios from "../../axios/index";

@Options({})
export default class FileUploadTest extends Vue {

    protected file: any;

    submitForm() {
        const formData = new FormData();
        formData.append('bytes', this.file);

        axios.post('https://localhost:44313/api/app/file/save',
            formData,
            {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
            }
        ).then(function (data) { …

vue.config.js我通过如下更改使用 Vue CLI 和 Vue 2 构建了一个多页面应用程序：

pages: {
    index: {
      entry: './src/pages/index/main.js',
      template: 'public/index.html',
      title: 'index page',
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    admin: {
      entry: './src/pages/admin/main.js',
      template: 'public/index.html',
      title: 'admin page',
      chunks: ['chunk-vendors', 'chunk-common', 'admin']
    }
},
...

但是如何使用 Vite 和 Vue 3 构建多页面应用程序呢？

这是我的目录结构。我像这样编辑了 vite.config.js：

import vue from '@vitejs/plugin-vue'
const { resolve } = require('path')
/**
 * @type {import('vite').UserConfig}
 */
export default {
  plugins: [vue()],
  build:{
    rollupOptions:{
      input:{
        main:resolve(__dirname,'index.html'),
        admin:resolve(__dirname,'src/admin/index.html')
      }
    }
  }
}

但当我构建时它返回错误，并且我无法通过 localhost:3000/admin/index.html 打开管理页面。

现在我正在为我的vue SFC 应用程序使用vite 构建工具。我通过以下链接阅读了 vite 的文档：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  define: {
      global: {
        appName: "my-custom-name"
      }
  },
  plugins: [vue()]
})

<template>
    <div class="bgNow">

    <p class="color1">
{{ use here }}
    </p>

</template>

<script>

    export default {
        data() {
            return {
              name: use here …