Access plugin on Action

[marioch5]

Hello! I am using nuxt and I can't seem to access my plugins on my action method body, am i doing something wrong??

I currently have my state set up like this:

store/index.ts

import Vuex from 'vuex';
import { extractVuexModule } from 'vuex-class-component';
import { UserStore } from '~/store/user';

export const modules = {
  ...extractVuexModule(UserStore),
};

store/user.ts

import { Context } from '@nuxt/types';
import { action, createModule } from 'vuex-class-component';
import { IUser } from '~/types/modules/user/userTypes';

const UserModule = createModule({
  namespaced: 'user',
  strict: false,
  target: 'nuxt',
});

export class UserStore extends UserModule {
  loggedUser?: IUser = undefined;

  @action async fetchLoggedUser() {
    console.log(this);
  }
}

plugin/storeProxies.ts

import { Plugin } from '@nuxt/types';
import { createProxy } from 'vuex-class-component';
import { UserStore } from '~/store/user';

const storeProxies: Plugin = (context, inject) => {
  const vxm = {
    user: createProxy(context.store, UserStore),
  };

  inject('vueStore', { ...vxm });
};

export default storeProxies;

The problem is that when i call await this.$vueStore.user.fetchLoggedUser(); on my component, i can't seem to find the app. When i access the this i can access the $store but inside of it i cannot find the context. I need it to make a api call to fetch my user.

Normally i would do something like

@action async fetchLoggedUser() {
   const user = this.$api.auth.fetchUser();

   etc...
 }

Am i missing something?? Thanks!

[henrycunh]

having the same problem here!

[wobsoriano]

const user = this.$api.auth.fetchUser();

I was able to access plugins like this:

const user = this.$store.app.$api.auth.fetchUser();

[sandronimus]

I think this is a cause of problem: https://github.com/michaelolof/vuex-class-component/blob/a4f1dc03f23b2eb4a714d2ac211f6303e031cac5/src/module.ts#L197

As a result this in action bound to vuex restricted context with only dispatch, commit, etc as here: https://github.com/vuejs/vuex/blob/9039c2169634925682ffcb21c57f5df355e16ad1/src/store.js#L474

To fix that we need to provide full store object from this instead of restricted context: Object.defineProperty( proxy, "$store", { value: this });

[sandronimus]

I've implemented a fix, you can give it a try. If all will be fine I will open PR.

https://github.com/sandronimus/vuex-class-component/tree/store-fix

[michaelolof]

Merged. Thanks 👍 https://github.com/michaelolof/vuex-class-component/pull/105

I've implemented a fix, you can give it a try. If all will be fine I will open PR.

https://github.com/sandronimus/vuex-class-component/tree/store-fix

[sandronimus]

@michaelolof Thank you! Can you publish new version, please?

[michaelolof]

@sandronimus Here https://www.npmjs.com/package/vuex-class-component/v/2.3.6

Thanks