npm package for vuex module give error after dispatching - vue.js

I’ve just made an npm package as a module for my vuex. after a long try finally, I could install it and mix it with my vuex. using this link
I console log my store and the action section contain my npm package luckily. but when I want to dispatch it gives me an error :(
use it in my app like :
this.$store.dispatch('orderiomApiPackageAuth/auth')
send me error:
[vuex] unknown action type: orderiomApiPackageAuth/auth
in my module.js:
import axios from "axios";
const state ={
restaurantInfo: {},
imprint: null
};
const mutations = {
setRestaurantInfo(state, restaurantInfo) {
state.restaurantInfo = restaurantInfo
},
setImprint(state, imprint) {
state.imprint = imprint
}
};
const actions = { //some action here }
export default {
namespaced: true,
state,
mutations,
actions
};
in my index.js for package:
import myModule from '/.module.js'
function install(Vue, options ={}) {
if (!options.store) console.log('Please provide a store!!')
options.store.registerModule('desiredName', myModule )
}
export default {
install
}
and use it in my main.js in the project:
import myPackage from 'myPackage'
import store from './store'
Vue.use(myPackage, { store })
I console.log(this.$store) and I realize that the action section contains my modules. but I have a problem with dispatch them.
I took a snapshot from my console share it here :
enter image description here
any help? :(

Related

How do I mock this Vue injection?

I have a Vue 3 component that, when mounted in tests, cause warnings:
console.warn node_modules/#vue/runtime-core/dist/runtime-core.cjs.js:40
[Vue warn]: injection "Symbol(VueToastification)" not found.
at <ModifyJob ref="VTU_COMPONENT" >
at <VTUROOT>
I assume it's this one complaining https://github.com/Maronato/vue-toastification/blob/master/composition/index.js#L30.
I have nearly 100 of these warnings, so it's kind of hard to read test-run output. I've tried to mock provide for this dependency, but I can't seem to succeed:
let provide = {}
provide[VueToastification] = VueToastification
provide['VueToastification'] = VueToastification
provide[Symbol(VueToastification)] = VueToastification
provide[Symbol('VueToastification')] = VueToastification
provide['Symbol(VueToastification)'] = VueToastification
let options = {
global: {
provide: provide,
}
}
mount(ModifyJob, options)
Is this some Vue2/Vue3 incompatibility or do I just not understand the docs at https://vue-test-utils.vuejs.org/v2/api/#global-provide ? Can someone help me get rid of these warnings, ideally by allowing me to inject a mock so I can test that toasts are made?
That error actually indicates that the plugin isn't installed in the test Vue instance. You could make VueToastification available to the component under test through the global.plugins mounting option:
import { shallowMount } from '#vue/test-utils'
import MyComponent from '#/components/MyComponent.vue'
import VueToastificationPlugin from 'vue-toastification'
it('initializes', () => {
shallowMount(MyComponent, {
global: {
plugins: [VueToastificationPlugin]
}
})
})
Alternatively, if you want to verify that toast() (from VueToastification's useToast()) is called, you could mock vue-toastification:
import { shallowMount } from '#vue/test-utils'
import MyComponent from '#/components/MyComponent.vue'
jest.mock('vue-toastification')
it('should call toast', () => {
const toast = jest.fn()
require('vue-toastification').useToast.mockReturnValueOnce(toast)
shallowMount(MyComponent).vm.showToast()
expect(toast).toHaveBeenCalled()
})
I solved setting a global list of plugins according to https://next.vue-test-utils.vuejs.org/api/#config-global:
// In a jest.setup.js file
import { config } from "#vue/test-utils";
import VueToastificationPlugin from "vue-toastification";
config.global.plugins = [VueToastificationPlugin];
// In your jest.config.js
module.exports = {
...
setupFilesAfterEnv: ["./jest.setup.js"],
};

How do you properly dispatch an action in vuex? Getting error [vuex] unknown action type in Chrome

I'm trying to add some data to a restful endpoint with vuex, and Chrome keeps throwing the following error: vuex.esm.js?2f62:438 [vuex] unknown action type: POST_REGISTER - Any help / insight you can provide would be extremely helpful.
Here's what I have setup.
In a vuex module:
import actions from './actions.js'
export default {
actions: {}
}
In actions.js:
import client from '#/services/authService.js'
export const POST_REGISTER = 'POST_REGISTER'
export default {
[POST_REGISTER]: (context, data) => client.post('auth/register', data)
}
in authService.js
import axios from 'axios'
export default axios.create({
baseURL: '/api/v1/'
})
My call from the vue component:
import {POST_REGISTER} from "#/store/auth/actions"
methods: {
createOrUpdate: function(login) {
this.login.username = login.username
this.login.password = login.password
this.$store.dispatch(POST_REGISTER, this.login)
}
}
}
It looks like you never actually use the actions import in the vuex module. Try the following:
import actions from './actions.js'
export default {
actions
}

import and module.exports in Vuex module show Uncaught TypeError: Cannot assign to read only property 'exports' of object

i have a vuex module by Vue CLI
import { Sev } from "../api";
const modules = {
actions: {
getData() {
Sev();
}
}
};
module.exports = modules;
and i got an error in browser console
test.js?5df4:10 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
at Module.eval (test.js?5df4:10)
at eval (test.js:12)
at Module../src/config/store_modules/test.js (app.js:1263)
then i change the code to
import { Sev } from "../api";
// const modules = {
export default {
actions: {
getData() {
Sev();
}
}
};
// module.exports = modules;
then work well. But i don't know what different. is it a bug ?
VueJS is browser code and use ES6 modules
import xxx from './path/to/xxx';
export xxx;
export default xxx;
while CommonJS is used by NodeJS and is completely different
const yyy = require('./path/to/yyy');
module.exports = { yyy };
exports.zzz = yyy;
You're writing Vue code so you must use ES6 modules and the import/export syntax, the module object doesn't behave as you'd expect in ES6

Not able to access i18 plugin from mutation in classic mode store in Nuxt application

I'm trying to implement Vuex i18n package within my Nuxt application. In my nuxt.conf.js file in plugins array I have:
{
src: '#/plugins/i18n.js',
ssr: false
},
plugins/i18n.js file is:
import Vue from "vue";
import vuexI18n from "vuex-i18n/dist/vuex-i18n.umd.js";
import toEnglish from "../translations/toEnglish";
import toSpanish from "./../translations/toSpanish";
import toGerman from "./../translations/toGerman";
export default ({ store }) => {
Vue.use(
vuexI18n.plugin,
store,
{
onTranslationNotFound: function (locale, key) {
console.warn(`vuex-i18n :: Key '${key}' not found for locale '${locale}'`)
}
}
);
// register the locales
Vue.i18n.add('en', toEnglish);
Vue.i18n.add('de', toGerman);
Vue.i18n.add('es', toSpanish);
// Set the start locale to use
Vue.i18n.set('de');
Vue.i18n.fallback('en');
}
Last thing is my store. I'm using classic mode of vuex store in Nuxt:
import Vuex from "vuex";
const store = () => {
return new Vuex.Store({
state: () => ({
currentLanguage: ''
}),
mutations: {
changeLang(state, response) {
if (response) {
console.log(this);
state.currentLanguage = response;
this.i18n.set(response);
}
}
}
})
};
export default store;
As you can see in store file in mutation I'm trying to access i18n plugin with this keyword. Unfortunetally in print error in console:
TypeError: Cannot read property 'set' of undefined
this which I consoled also inside mutation is:
I changed this.i18n.set(response); to state.i18n.locale = response; inside my mutation and now it seems working.
For some reason when I call this mutation my video.js player refresh. I will try to find out why.

importing store to a vuejs nuxt project

I'm trying to write a simple plugin for my Vue.js(Nuxt) project. I came across this post Adding Mutations to Vuex store as part of Vue Plugin but still unable to get it working.
Here is my application structure.
~ is root
~/plugins/HTTP/index.js
~/plugins/HTTP/_store/ => index.js, actions.js, getters.js, mutations.js
~/plugins/HTTP/_api/ => index.js
**Global Store**
~/store/index.js
~/store/modules/
~/store/modules/testing => index.js, actions.js, getters.js, mutations.js
in my ~/plugins/HTTP/index.js, I have the following code
import Vue from 'vue';
import store from '~/store';
const HTTP = {
install(vue, { store }){ // Now you plugin depend on store
if(!store){
throw new Error('Please provide vuex plugin.')
}
// register your own vuex module
store.registerModule({store})
}
}
export default HTTP;
Vue.use(HTTP)
In my ~/store/index.js I have the following code:
import Vuex from 'vuex'
import testingModule from './modules/testing'
const state = () => {
return new Vuex.Store({
modules:{
testing: testingModule
}
})
}
export default state
When I try to run it, it gives me the following message:
Cannot destructure property `store` of 'undefined' or 'null'.
What did I do wrong here?
You aren't passing any properties so the error is correct. You need pass in an options object when you tell it to use. It can be empty, but it needs an object.
import Vue from 'vue';
import store from '~/store';
const HTTP = {
install(vue, { store }){ // Now you plugin depend on store
if(!store){
throw new Error('Please provide vuex plugin.')
}
// register your own vuex module
store.registerModule({store})
}
}
export default HTTP;
Vue.use(HTTP, {}) // <---------- Empty object to avoid allow destructuring.