CODEWITHSUNDEEP
vue.jsvuejs3vue-composition-api
Jérémie Chazelle
Jérémie Chazelle

Reputation: 1818

v-model and Composition API with provide and inject

I would like to know how can I show the value from composition API with v-model and Composition API.

Currently I have my store.js :

import { reactive, toRefs, computed } from "vue";

export default function users() {
    // State
    const state = reactive({
        userForm: null,
    });

    // Mutations
    const UPDATE_USER_FORM = (user) => {
        state.userForm = user;
    };

    // Actions
    const updateUserForm = (payload) => {
        UPDATE_USER_FORM(payload);
    };

    // Getters
    let getUserForm = computed(() => state.userForm);

    return {
        ...toRefs(state),
        updateUserForm,
        getUserForm
    }
}

I provide my store in createApp :

import users from '@/Stores/users';
...
let myApp = createApp({ render: () => h(app, props) });
myApp.provide('userStore', users());

I inject my store in my component :

setup(props, context) {
    const userStore = inject('userStore');

    return { userStore }
}

In the template I use it, but I don't see the value :

I try this :

<div>userForm : {{userStore.userForm}}</div> // see the user object

<div>userForm with value : {{userStore.userForm.value.firstname}}</div> // see the firstname value

<div>userForm no value : {{userStore.userForm.firstname}}</div> // don't see the firstname

<input v-model="userStore.userForm.firstname"> // don't see the firstname

I would like to use the value in the input...

Upvotes: 1

Views: 1407

Answers (1)

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

First thing that you should do is to put the state outside the composable function in order to be available for all components as one instance :

import { reactive, toRefs, computed } from "vue";
  // State
    const state = reactive({
        userForm: null,
    });
export default function users() {
  

    // Mutations
    ...
    return {
        state,
        updateUserForm,
        getUserForm
    }
}

second thing is to import the composable function in any component you want since the inject/provide could have some reactivity issues :

<input v-model="state.userForm.firstname"> 
...

import users from './store/users'
....
setup(props, context) {
    const {state,updateUserForm,getUserForm} = users();

    return { state }
}

Upvotes: 1

Related Questions