标签: vuejs3

我正在尝试将@vue/apollo-composable与我的 Nuxt-Ts 应用程序一起使用。这是如何将它注入到“普通”Vue 应用程序的根实例中的示例：

import { provide } from '@vue/composition-api'
import { DefaultApolloClient } from '@vue/apollo-composable'

const app = new Vue({
  setup () {
    provide(DefaultApolloClient, apolloClient)
  },

  render: h => h(App),
})

问题：我不知道如何访问Nuxt-TS 中的根实例。

我尝试制作一个插件，但它直接注入到根实例中（这是不对的，因为@vue/apollo-composable使用composition-api::provide()which 创建了它自己的属性_provided。

如果我使用 nuxt 插件，则会inject将$get 连接起来。如果我_provided直接写一个对象通过ctx.app._provided =它不会粘住。

import { DefaultApolloClient } from "@vue/apollo-composable";
const myPlugin: Plugin = (context, inject) => {
  const defaultClient = ctx.app.apolloProvider.defaultClient;
  inject(DefaultApolloClient.toString(), defaultClient) …

我正在使用 Vue 3 beta 版本，我试图访问设置函数中的 ref，我的组件：

JS（Vue）：

const Child = createComponent({
  setup () {
    let tabs = ref()
    console.log(tabs)
    return {}
  },
  template: '<div ref="tabs" >Wow</div>'
})

演示：https : //jsfiddle.net/xkeyLwu4/2/

但是 tabs.value 的值是未定义的。我在这里做错了什么？

在 Vue2 上，我只添加了 CDN，然后我的 js 文件中就有 Vue 可用，但在 Vue3 上我不能这样做 - 我的 js 文件没有检测到 Vue。为了使用Vue3，我该如何解决？

在 Vue.js 3（测试版）中，我使用 定义了一个数组reactive，因为我想将其内容绑定到循环中的某些 UI 控件。到目前为止，这行得通，一切都很好。

现在，我需要更新这个数组中的一个值，这意味着我需要在这个数组上运行 afind或 a findIndex。由于该数组由 Vue.js 代理，因此无法按预期工作：代理不是一个简单的普通数组。

我所做的是使用 获取副本toRaw，findIndex在该副本上运行，然后使用索引更新原始数组。这行得通，但当然它似乎不是很优雅。

有没有更好的方法来解决这个问题？

PS：如果是只适用于Vue 3的解决方案就好了，我不在乎2.x系列。

使用 Webpack，我有以下代码：

    import { createApp } from 'vue'
    import Vue from 'vue'
    import App from './components/ItemSearch/ItemSearch.vue'
    
    createApp(App).mount('#search-app')

在我的网站上，我有一个搜索应用程序页面，其中包含<div id="search-app" />将应用程序的根安装到的 。

我想知道的是，是否有可能以某种方式插入（最好）来自包含 javascript 文件的页面的一些数据？我想从数据库中包含一些项目，例如设置和搜索类别，如果可以提供帮助，我想避免向它们发出 AJAX 请求。

是否有帮助，或者有什么方法可以在加载时内嵌这些数据？

使用 Webpack，我不太明白如何从加载 javascript 文件的页面访问 App，以便我可以data在以某种方式将其传递给 之前进行修改createApp()，或者甚至可能的话。我可以import在浏览器加载的页面上使用语句，还是这只是 Webpack 的（或类似的）功能？

提前谢谢了。

我如何将 vuex 注入 Vue 3，在 Vue 2 中可能像：

new Vue({
  el: '#app',
  store: store,
})

但是在 Vue 3 中你会怎么做，因为没有new Vue().

Vue 版本：3.0.2

刷卡版本：6.3.5

我想在Vue3.0中使用Swiper的slideTo方法，但是好像不行。

你能告诉我怎么用吗？https://codesandbox.io/s/interesting-hooks-1jblc?file=/src/App.vue

我正在将我的应用程序升级到 VueJS 3。我读到您可以保留相同的组件。但是我现在在控制台中有一个错误，尽管我没有改变任何东西。这是我的组件：

<template>
  <v-container>
    <div
      @click="onClick"
      @mousemove="onMouseMove"
      id="menu3D"
      style="background-color: transparent; position: fixed; left: 20px; width:15%; height:100%;">
    </div>
    <v-row class="text-center">

      <v-col
        class="mb-5"
        cols="12"
      >
        <h2 class="headline font-weight-bold mb-3">
          Accueil
        </h2>

        <v-row justify="center">

          <p>
            Client: {{ JSON.stringify(client)}}
          </p>
          <p>
            Mouse: {{ JSON.stringify(mouse)}}
          </p>
          <p>
            Container: {{ JSON.stringify(container)}}
          </p>
        </v-row>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>

import * as Three from 'three';

export default {
  name: 'Accueil',
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.createScene();
      this.createCamera();
      this.userData.formes.forEach((x) => this.createShape(x));
      this.addSpotlight(16777215);
      this.addAmbientLight();
      this.animate(); …

我想有条件地在 vue 路由器中导入一个组件。这是我目前所拥有的：

children: [
  {
    path: ':option',
    component: () => import('../components/Option1.vue'),
  },
],

根据什么:option是我想要导入一个不同的组件（Option1.vue，Option2.vue，等）。我知道我可以放几个，children但我实际上需要option在我的父组件中使用该变量（如果路由有选项，我会进行测试）。

怎么可能做到这一点？提前致谢 ：）

如何访问在 Vue.js 中抛出代理对象的获取响应。从字面上看，我在我的 Vue.js 组件中触发了一个方法，该方法调用连接我的 Vuex 中的 getter 的计算函数，代码如下：

METHOD IN COMPONENT

methods: {
    ...mapActions(["getAllUsers"]),


    async gettingAllusers() {
      const target = await this.getterGetAllUsers;
      console.log(target);
      return target;
    },
  },

COMPUTED IN COMPONENT

 computed: {
    ...mapGetters(["getterGetAllUsers"]),

    getterGetAllUsersFunction() {
      return this.$store.getters.getterGetAllUsers;
    },
  },

VUEX

const store = createStore({
  state() {
    return {
      userRegisteredState: true,
      allUsersState: {},
    };
  },

  mutations: {
    
   commit_get_all_users(state, payload) {
      state.allUsersState =  payload;
      console.log(state.allUsersState);
      return state.allUsersState;
    },
  },

  getters: {
    getterGetAllUsers(state) {
      console.log(state);
      console.log(state.allUsersState)
       return state;
    },
  },

  actions: { …