vue-composition-api

问题 I'm trying to use @vue/apollo-composable with my Nuxt-Ts application. This is the example how it should be injected into root instance on a "normal" Vue application: import { provide } from '@vue/composition-api' import { DefaultApolloClient } from '@vue/apollo-composable' const app = new Vue({ setup () { provide(DefaultApolloClient, apolloClient) }, render: h => h(App), }) Problem: I don't know how to get access to the root instance in Nuxt-TS . I tried making a plugin, but it's injected

问题 I'm trying to use @vue/apollo-composable with my Nuxt-Ts application. This is the example how it should be injected into root instance on a "normal" Vue application: import { provide } from '@vue/composition-api' import { DefaultApolloClient } from '@vue/apollo-composable' const app = new Vue({ setup () { provide(DefaultApolloClient, apolloClient) }, render: h => h(App), }) Problem: I don't know how to get access to the root instance in Nuxt-TS . I tried making a plugin, but it's injected

问题 I'm wondering how should I reset a reactive in vuejs setup? (i know if change it to the ref and using view.value will solve this problem, but there should be an answer to this for using reactive) 回答1: You can use Object.assign : setup() { const initialState = { name: "", lastName: "", email: "" }; const form = reactive({ ...initialState }); function resetForm() { Object.assign(form, initialState); } function setForm() { Object.assign(form, { name: "John", lastName: "Doe", email: "john@doe.com

问题 We're trying to convert a simple SFC to use the new Vue CompositionAPI. This code works flawless: export default { data() { return { miniState: true } }, methods: { setMiniState(state) { if (this.$q.screen.width > 1023) { this.miniState = false; } else if (state !== void 0) { this.miniState = state === true } else { this.miniState = true } }, }, watch: { '$q.screen.width'() { this.setMiniState() } } }; Converting this to the new CompostionAPI looks like this: export default defineComponent({

问题 Consider the following composition function: import { computed, ref } from '@vue/composition-api' import { isInternetExplorer } from 'src/services/utils/utilsService' import { Screen } from 'quasar' import { auth, getAllScopes } from 'src/services/auth/authService' const isLoginPopup = Screen.lt.sm || isInternetExplorer ? false : true const accountID = ref('') export const setAccountID = () => { const account = auth.getAccount() if (account) { accountID.value = account.idTokenClaims.oid }

问题 Consider the following composition function: import { computed, ref } from '@vue/composition-api' import { isInternetExplorer } from 'src/services/utils/utilsService' import { Screen } from 'quasar' import { auth, getAllScopes } from 'src/services/auth/authService' const isLoginPopup = Screen.lt.sm || isInternetExplorer ? false : true const accountID = ref('') export const setAccountID = () => { const account = auth.getAccount() if (account) { accountID.value = account.idTokenClaims.oid }

问题 In main.js I have something like this: import { myUtilFunc} from './helpers'; Object.defineProperty(Vue.prototype, '$myUtilFunc', { value: myUtilFunc }); In this way I have acess to myUtilFunc across whole application with this.$myUtilFunc But how can I achieve the same in setup() method in Vue 3 if I don't have access to this ? 回答1: In Vue 3, setup has an optional second argument for context . You can access the Vue instance through context.root instead of this : setup(props, context) {

问题 I want to create a reusable wrapper function written in TypeScript for triggering a toast notification by using a composition function , as defined in the current specification for Vue 3.0: Composition API RFC. This example is using BootstrapVue v2.0 toast component. With Vue 2, it would be invoked via the this.$bvToast Vue component instance injection in the root context : this.$bvToast.toast('Error happened', { title: 'Oh no', variant: 'danger' }); This service-like composition function

问题 How do I configure vue-apollo ,combined with @vue/apollo-composable for consummation with @vue/composition-api or Vue3.0 ? Because although I get an default apolloClient via using @nuxtjs/apollo : import { DefaultApolloClient } from "@vue/apollo-composable"; const myPlugin: Plugin = (context, inject) => { const defaultClient = ctx.app.apolloProvider.defaultClient; // do stuff with defaultClient, e.g. provide() } export default myPlugin it's still empty instead of populated with my settings