Some issues with passing store to Component

[tcj100]

Thank you for providing this library. I have a small issue with migrating Vue2 to Vue3.

I passed in 'store' in the 'Component' of the 'vue-property-decorator', and the current component's $store points to the passed in 'store'. Your library passes' store 'to' Component ', and the current component's $store does not point to the passed in' store '

@Component({ options: { store } })

[rdhelms]

@tcj100 Happy to try to help if we can! Could you provide a bit more context about what you're wanting to accomplish?

• What is the store value that you're wanting to pass to the component? Is it a pinia store instance?
• I tried looking through vue-property-decorator's documentation for any info regarding handling of a store or $store option, but wasn't having any luck. Do you have any other info regarding the existing behavior/support you're looking for?

In general, it sounds like what you're trying to accomplish with access to a $store property would usually be done through a Plugin (like Pinia) instead of an individual component option, but I may be misunderstanding what you're aiming for.

[tcj100]

@tcj100 Happy to try to help if we can! Could you provide a bit more context about what you're wanting to accomplish?

• What is the store value that you're wanting to pass to the component? Is it a pinia store instance?
• I tried looking through vue-property-decorator's documentation for any info regarding handling of a store or $store option, but wasn't having any luck. Do you have any other info regarding the existing behavior/support you're looking for?

In general, it sounds like what you're trying to accomplish with access to a $store property would usually be done through a Plugin (like Pinia) instead of an individual component option, but I may be misunderstanding what you're aiming for.

The situation is that this is a project for upgrading Vue2 to Vue3. In Vue2, I have created a new store for each sub page, which is exclusive to the sub components and does not point to the global store. It encapsulates some methods, and when used, only modifiers are needed,

[ruojianll]

Need a online error example.

[tcj100]

Need a online error example.

@ruojianll @rdhelms The following is the Vue2 notation

appStore.ts

import Vuex from 'vuex';
export default new Vuex.Store({
  state: {
    name:'张三'
  }
});

App.vue

import { Component, Vue } from 'vue-property-decorator';
import store from './appStore';
@Component({
  store,
})
export default class App extends Vue {
  mounted() {
    console.log(this.$store.state.actionList);   //The output result is 张三
  }
}

The following is the Vue3 notation

main.ts

import { createApp } from 'vue';
import './style.css';
import App from './App.vue';
import { createStore } from 'vuex';
const app = createApp(App);
const store = createStore({
  state: { name: '李四' }
});
app.use(store).mount('#app');

appStore.ts

import { Store } from 'vuex';
export default new Store({
  state: {
    name: '张三'
  }
});

App.vue

 import { Component, Vue, toNative } from 'vue-facing-decorator';
 import store from './appStore';

  @Component({ options: { store } })
  class App extends Vue {
    mounted() {
      console.log(this.$store.state.name); //The output result is 李四 instead of 张三
    }
  }
 export default toNative(App);

[ruojianll]

Try https://github.com/wangzhiguoengineer/vuex-facing-decorator

[tcj100]

Try https://github.com/wangzhiguoengineer/vuex-facing-decorator

@ruojianll Tested, this package cannot retrieve the incoming store, possibly due to issues with Vuex4

[wangzhiguoengineer]

Try https://github.com/wangzhiguoengineer/vuex-facing-decorator

@ruojianll Tested, this package cannot retrieve the incoming store, possibly due to issues with Vuex4

@tcj100 I think this is a bug in the Vue3 optional defineComponent, which has nothing to do with vue-facing-decorator and vuex-facing-decorator.