Vue 3 and Vuex 4 - Dialog header and content templates can't access vuex state

[Janno Liivak]

With Vue 2 and Vuex 3 we could add store property to template in order to access vuex state with "this.$store" but this approach doesn't work anymore because instead of...

Vue.component(...)

we now have to use...

const app = createApp();

...to use "app.component(...)" when setting up template. But now it's new app instance and it'doesn't have access to store. I couldn't get store to work even when using...

import {useStore} from '..store';
const app = createApp();
app.use(store);

... or when I try to access this inside template with setup block...

setup() {
  const store = useStore();
  return {
    someVariable: computed(() => store.state.someVariable),
  }
}

So how can I access vuex state inside templates across Syncfusion controls? ... with Vue 3 and Vuex 4. If I can make it work for Dialog it would work everywhere :)

[Buvana Sathasivam]

Hi Janno, 

Currently, we are validating your reported query. We will update you with further details on or before February 21, 2022. 

Regards, 

Buvana S 

[Vinitha Jeyakumar]

Hi Janno,

Your reported issue can be resolved by adding the Dialog's content using custom component where we can access the vuex state. please check the code below,

Code snippet:

App.vue

<template>

  <div>

    <div class="col-lg-12 control-section">

        <!-- Render Button to open the Dialog -->

        <ejs-button id='dlgbtn' v-if="OpenBtn" @click.native="BtnClick">Open</ejs-button>

        <ejs-dialog :buttons='dlgButtons' ref="dialogObj"  :header='headerTemplate'  :animationSettings='animationSettings'  showCloseIcon=true :target='target' width='500px' :open="dialogOpen"

            :close="dialogClose">

       <base-container title="Vuex">

    <change-counter></change-counter>

  </base-container>

        </ejs-dialog>

    </div>

  </div>

</template>

<script>

methods: {

    addOne() {

      // Variant I, with action

      this.$store.dispatch("increase", { value: 10 });

      // Variant II, with mutation

      this.$store.commit({

        type: "increase",

        value: 10,

      });

    },

</script>

BaseContainer.vue

<template>

  <section>

    <h2>{{ title }}</h2>

    <h1>Direct Storage {{ $store.state.counter }}</h1>

    <slot></slot>

  </section>

</template>

<script>

export default {

  props: ["title"],

};

</script>

ChangeCounter.vue

<template>

  <button @click="increment">Add 2 (Increment Action)</button>

  <button @click="increase({ value: 10 })">Add 10 (Increase Action)</button>

</template>

<script>

import { mapActions } from "vuex";

export default {

  methods: {

    ...mapActions(["increment", "increase"]),

  },

};

</script>

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Vue3-Vuex-300686967

Regards,

Vinitha

[Janno Liivak]

Sadly this doesn't help me very much. How can I access Vuex store state from templates? ... specifically from Dialog's header, content and footer template. How must I define dialog's header template in order it to access vuex store to which dialog it'self has access?

header template is defined as such:

const app = createApp();
const headerTemplate = app.component('headerTemplate', {
  template: ....,
  data: () => ({}),
});

[Vinitha Jeyakumar]

Hi Janno,

Currently, we are validating your reported query. we will update you the further details on or before 2^nd September 2022.

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi Janno,

Still, we are validating your reported query due to its complexity. we will update you the further details on or before 8^th September 2022.

Regards,

Vinitha

[Vinitha Jeyakumar]

Hi Janno,

Sorry for the inconvenience caused

Can you please explain the issue which you are facing with the sample we have provided using custom component. It will be helpful for us to further validate on the issue.

Please share us with the issue reproducing code snippet or sample.

Regards,

Vinitha