Vue - Modules of store not accessible in component - javascript

My src/store/modules/authToken.js file is like this:
const authToken = {
state: {
token: localStorage.getItem('user-token') || '',
status: '',
},
mutations: {
authSuccess(state, token) {
console.log('hellllo')
state.token = token
state.status = 'success'
},
authFail(state) {
state.status = 'error'
}
},
getters: {
isAuthenticated: state => {
return !!state.token
},
authStatus: state => {
return state.status
}
}
}
My src/store/store.js file is like this:
import Vue from 'vue'
import Vuex from 'vuex'
import authToken from './modules/authtoken'
Vue.use(Vuex)
Vue.config.devtools = true
export const store = new Vuex.Store({
modules: {
authToken
}
})
In my main.js file, I am using the store as below:
import { store } from './store/store'
new Vue({
render: h => h(App),
store,
router,
}).$mount('#app')
Now, when I try to access the autoken module in a component file, I am unable to access it. I'm doing this.$store.state.authToken.getters.isAuthenticated
but I'm getting the following error when I try to use it.
Error in mounted hook: "TypeError: Cannot read property
'isAuthenticated' of undefined"

This is because you forgot to export your object in your file src/store/modules/authToken.js. Since nothing is exported, the authToken variable you feed the store will be undefined.
Just add this at the end of your file :
export default authToken;

Related

Returning data from store.js in vuejs returns TypeError

I have a store.js file which sends an api request and gets responses using axios,
the api is tested and working perfectly.
store.js contains this code :
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
import cUser from './modules/User';
import UI from './modules/UI';
Vue.use(Vuex)
export default new Vuex.Store({
data: function () {
return {
responsedata: []
};
},
viewresults: async (commit, payload)=>{
let token =localStorage.getItem('token');
let username= payload.username;
await axios.post('search',{token, username}).then(response => {
this.responsdata = response.data;
}).catch(er=>{
console.log(er);
});
and i have this function in other file that uses it :
search(){
console.log('search clicked');
console.log(this.username);
this.responsedata = this.$store.dispatch('viewresults',{
username: this.username,
});
console.log(this.responsedata);
},
}
but i get this error in the browser console :
TypeError: Cannot set property 'responsedata' of undefined
it seems like that viewresult in the store.js can't see the responsedata variable defined in data return function .
Let me show you an example about how to use the Vuex store:
// main.js
import Vue from 'vue';
import App from './App.vue';
import store from '#/store/index';
new Vue({
el: '#app',
store,
components: {
App
},
render: h => h(App)
});
Now the store.js file:
import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios'
Vue.use(Vuex);
const state = {
responseData: []
}
const mutations = {
setResponse(state, data) {
state.responseData = data;
}
}
const actions = {
async viewResults({ commit }, payload) {
let token =localStorage.getItem('token');
let username= payload.username;
await axios.post('search', { token, username }).then(response => {
commit('setResponse', response.data);
}).catch(er=>{
console.log(er);
});
}
}
export const store = new Vuex.Store({
state,
mutations,
actions
});
And a component to call the action and show the information:
// SearchAndShowData.vue component
<template>
<div>
<button click="search">
Search
</button>
{{ responseData}}
</div>
</template>
<script>
import {mapActions, mapState} from 'vuex';
export default {
name: "SearchAndShowData",
data: () => ({
username: "Andres",
}),
computed() {
// Expose the state.responseData object as responseData
...mapState(['responseData']) // If you want to preprocess the data, use create a getter and use mapGetters
// As a computed property, it will be updated always that responseData has any change
},
methods: {
...mapActions(["viewResults"]), // Expose the viewResults action as a method, call it with this.viewResults
search() {
this.viewResults({username: this.username })
}
}
}
</script>
I didn't test it, but this is the idea behind a vuex store and how to use it, if somebody sees an error, please let me know to update the answer (thanks).
Hope you can update your code with this information and it can work properly.
Also, Scrimba has a free course that could help you to extend your knowledge about Vuex, check it here

How to pass data from vuex store through module to vue component?

I'm able to console data, as well as able to see data in vuex dev tool
but not able to display them in table. Please if someone could check
my code and tell me what is wrong with it. Thanks folks. I tried differents methods like async/await, promise, getters... but I was not able to to get the data, probably I was not calling it properly.
ROLE.VUE
<emplate>
<di>
<p v-for="(role, index) in roles :key="index">
</div>
</template>
<script>
import { mapState } from 'vuex'
export default ({
name: 'Role',
metaInfo: {
title: 'Role'
},
created () {
this.$store.dispatch('loadRoles').then((response) => { console.log(response) })
},
computed: {
...mapState([
'roles'
])
}
})
</script>
role.js
import Axios from 'axios'
export default {
// namespaced: true,
state: {
roles: [],
},
getters: {
roles (state) {
return state.roles
}
},
mutations: {
SET_ROLES (state, roles) {
state.roles = roles
}
},
actions: {
loadRoles ({ commit }) {
Axios.get('/settings/roles')
.then((response) => {
console.log(response.data)
// let roles = response.data
commit('SET_ROLES', response.data.roles)
})
}
}
}
index.js
import role from './role'
Vue.use(Vuex)
export const store = new Vuex.Store({
state: {
},
mutations: {
//
},
modules: {
role
},
actions: {
//
}
})
Main.js
import { store } from './store/store'
new Vue({
router,
store,
ValidationProvider,
render: h => h(App)
})
When loading from a module with mapState, you need to specify the name of the module you are loading from. Here is the proper syntax for your case:
...mapState('role', ['roles'])
The first argument is the module name, and the second is an array of state properties from that module.

vuex unknown action type while trying to post data to Django backend

I am trying to send my vuejs front end data using Vuex and Vue-axios to the backend. I have create a vuex store and vue-axios services But I get an error saying [vuex] unknown action type: addGeneral when I try to pass the data.
This is my vuex folder structure:
-store
-modules
-app
-mutations.js
-state.js
-general.js
-index.js
-actions.js
-getters.js
-index.js
-mutations.js
-state.js
This is module/general.js :
import { ApiService } from '#/services/api.service'
import { FETCH_GENERAL,
ADD_GENERAL
} from '../actions'
import { FETCH_START,
FETCH_END,
SET_GENERAL,
SET_ERROR,
} from '../mutations'
const state = {
general: [],
errors: {},
loading: false
};
const getters = {
general (state) {
return state.general;
},
isLoading (state) {
return state.loading;
}
};
const actions = {
[FETCH_GENERAL] (context, payload) {
context.commit(FETCH_START);
return ApiService
.get('general')
.then(({data}) => {
context.commit(FETCH_END);
context.commit(SET_GENERAL, data.general.results);
})
.catch(({response}) => {
context.commit(SET_ERROR, response.data.errors)
})
},
[ADD_GENERAL] (context, payload) {
context.commit(FETCH_START);
return ApiService
.postGeneral(`general`, '',payload)
.then(({data}) => {
context.commit(FETCH_END);
context.commit(SET_GENERAL, data.general.results);
})
.catch(({response}) => {
context.commit(SET_ERROR, response.data.errors)
})
}
};
const mutations = {
[FETCH_START] (state) {
state.loading = true
},
[FETCH_END] (state) {
state.loading = false
},
[SET_GENERAL] (state, pgeneral) { // can pass in payload
state.components = pgeneral;
state.errors = {}
},
[SET_ERROR] (state, errors) {
state.errors = errors
}
};
export default {
state,
getters,
actions,
mutations
}
This is module/index.js :
const requireModule = require.context('.', true, /\.js$/)
const modules = {}
requireModule.keys().forEach(fileName => {
if (fileName === './index.js') return
// Replace ./ and .js
const path = fileName.replace(/(\.\/|\.js)/g, '')
const [moduleName, imported] = path.split('/')
if (!modules[moduleName]) {
modules[moduleName] = {
namespaced: true
}
}
modules[moduleName][imported] = requireModule(fileName).default
})
export default modules
This is store/actions.js :
export const FETCH_GENERAL = "fetchGeneral";
export const ADD_GENERAL = "addGeneral";
This is store/index.js :
import Vue from 'vue'
import Vuex from 'vuex'
// Store functionality
import actions from './actions'
import getters from './getters'
import modules from './modules'
import mutations from './mutations'
import state from './state'
Vue.use(Vuex)
// Create a new store
const store = new Vuex.Store({
actions,
getters,
modules,
mutations,
state
})
export default store
This is store/mutations.js :
export const FETCH_START = "loadingOn";
export const FETCH_END = "loadingOff";
export const SET_ERROR = "setError";
// related to general
export const SET_GENERAL = 'setGeneral';
This is my vue-axios folder structure:
-services
-api.services.js
-config.js
This is services/api.serviecs.js :
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
import { API_URL } from './config'
import Cookies from 'js-cookie'
let CSRF_TOKEN = Cookies.get('csrftoken');
export const ApiService = {
init () {
Vue.use(VueAxios, axios)
Vue.axios.defaults.baseURL = API_URL
},
get (resource, slug='') {
return Vue.axios
.get(`${resource}\${slug}`,)
.catch((error) => {
throw new Error(`ApiService ${error}`)
})
},
postGeneral (resource, slug='', obj) {
return axios
.post(`${API_URL}\\${resource}\\${slug}`,{
systemName: obj.systemName,
regionOfDeployment: obj.regionOfDeployment,
operatingMode: obj.operatingMode,
solution: obj.solution,
baselineMode: obj.baselineMode,
baselineDetails: obj.baselineDetails,
projectDuration: obj.projectDuration,
},
{
headers: {
'X-CSRFToken': CSRF_TOKEN,
'Content-Type': 'application/json',
}
})
.catch((error) => {
throw new Error (`ApiService ${error}`)
})
},
}
export default ApiService
This is config.js:
export default {}
export const API_URL = 'http://127.0.0.1:8000/api';
and finally this is my vuejs component:
...
<v-btn class="mt-5 mr-2 font-weight-light" color="blue"
#click="addGeneral" >
...
methods: {
addGeneral() {
let obj = {
systemName: '',
regionOfDeployment: '',
operatingMode: '',
solution: '',
baselineMode: '',
baselineDetails: '',
projectDuration: ''
};
this.postGeneral(obj)
},
postGeneral(obj) {
this.$store.dispatch(ADD_GENERAL, obj)
}
}
Why do I get the error and what's the best way to solve it?
You're using namespaced: true, so you need to pass module name in dispatch
postGeneral(obj) {
this.$store.dispatch('general/' + ADD_GENERAL, obj)
}

can't fetch api data and store with vuex - vue.js

I have problem about api fetch with vuex. And there is no problem with my endpoint. I can see the json data. But when I try to fetch it i can't store the data and displaying console error below.
Error in mounted hook: "TypeError:
_api_article_js__WEBPACK_IMPORTED_MODULE_0__.default.getArticles is not a function"
About my import and export:
App.js
window._ = require('lodash');
try {
window.$ = window.jQuery = require('jquery');
require('foundation-sites');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
import Vue from 'vue';
import router from './routes.js';
import store from './store.js';
new Vue({
router,
store,
}).$mount('#app')
config.js
var api_url = 'mywebsite.com/api';
export const ESTATE_CONFIG = {
API_URL: api_url,
}
api/article.js
import { ESTATE_CONFIG } from '../config.js';
export default {
getarticles: function(){
return axios.get( ESTATE_CONFIG.API_URL + '/articles' );
},
}
Store.js
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
import { articles } from './modules/articles.js'
export default new Vuex.Store({
modules: {
articles,
}
});
modules/articles.js
import ArticleAPI from '../api/article.js';
export const articles = {
state: {
articles: [],
articlesLoadStatus: 0,
article: {},
articleLoadStatus: 0
},
getters: {
getArticlesLoadStatus( state ){
return state.articlesLoadStatus;
},
getArticles( state ){
return state.articles;
},
},
mutations: {
setArticlesLoadStatus( state, status ){
state.articlesLoadStatus = status;
},
setArticles( state, articles ){
state.articles = articles;
},
},
actions: {
loadArticles( { commit } ){
commit( 'setArticlesLoadStatus', 1 );
ArticleAPI.getArticles()
.then( function( response ){
commit( 'setArticles', response.data );
commit( 'setArticlesLoadStatus', 2 );
})
.catch( function(){
commit( 'setArticles', [] );
commit( 'setArticlesLoadStatus', 3 );
});
},
},
}
I need help about this. Because I am not sure what I am doing wrong here. And of course there is no problem with the endpoint. I can see the json data. But my vuex store is empty. And I have an error above.
The error indicates that an exported function called getArticles does not exist in api/article.js.
Taking a look at that module, it looks like a capitalization issue. The function is not capitalized so when calling it, use:
ArticleAPI.getarticles

Vuex with Jest - Cannot read property <getterName> of undefined

I'm trying to use Jest to test a Vue component which makes use of a getter in Vuex. The getter returns a function which in turn returns an array:
questions: state => pageNumber => state.pages[pageNumber].questions
I make use of it in my component like so:
computed: {
inputs() {
return this.$store.getters.questions(this.pageNumber);
},
},
This seems to work fine in terms of rendering the UI, but when trying to test the component I get Cannot read property 'questions' of undefined
My test is a pretty simple one, but I've not used Jest with Vuex before so I could be misunderstanding how you would test components which use getters:
import Vuex from 'vuex';
import { mount, createLocalVue } from '#vue/test-utils';
import SurveyQuestionBuilder from '../components/SurveyQuestionBuilder.vue';
import store from '../store';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('SurveyQuestionBuilder.vue', () => {
it('renders a value from $store.state', () => {
const wrapper = mount(SurveyQuestionBuilder, { store, localVue });
expect(wrapper.exists()).toBeTruthy();
});
});
I'm presuming it's to do with pages[pageNumber] in the getter, but not sure what to do to resolve it.
Store.js imports a couple of modules:
import Vue from 'vue';
import Vuex from 'vuex';
import surveyBuilderStore from './survey_builder';
import matrixStore from './matrix';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
survey: surveyBuilderStore,
matrix: matrixStore,
},
});
The module in question is surveyBuilderStore:
const surveyBuilderStore = {
state: {
pages: [],
},
getters: {
pages: state => state.pages,
questions: state => pageNumber => state.pages[pageNumber].questions,
config: state => (pageNumber, questionNumber) =>
state.pages[pageNumber].questions[questionNumber].config,
},
mutations: {
// my mutations
}
};
In your questions getter, you search at probably unknown index in the pages array.
So questions: state => pageNumber => state.pages[pageNumber] is undefined because state.pages is empty and pageNumber is above 0.
To avoid this you can do:
questions: state => pageNumber => {
return state.pages[pageNumber]
? state.pages[pageNumber].questions
: [] // <-- here your default value
}
You can set in your test the value of pageNumber but I don't know if it's a props or data of the component:
For data:
mount(SurveyQuestionBuilder, {
store,
localVue,
data:() => ({ pageNumber: 0 })
})
For props:
mount(SurveyQuestionBuilder, {
store,
localVue,
propsData: { pageNumber: 0 }
})

Categories