I'm building a mobile native app in vue-native but I've got a problem. I want to retrieve the state of something in my store but it can't seem to find the store.
This is my code:
import {mapGetters, mapActions} from 'vuex'
import Store from '../../store/Index'
computed: {
...mapGetters('dashboard', ['recent'])
},
This is what my store looks like:
My Index.js in my dashboard folder:
import actions from './Actions'
import getters from './Getters'
import mutations from './Mutations'
export default function () {
return {
namespaced: true,
state: {
recent: {
data: [],
},
visited: {
data: [],
pagination: null
},
own: {
data: [],
pagination: null
}
},
actions,
getters,
mutations
}
}
And my Index.js in my modules folder:
import Vue from "vue-native-core";
import Vuex from "vuex";
import user from './modules/user/Index'
import dashboard from './modules/dashboard/Index'
import communities from'./modules/communities/Index'
import settings from './modules/settings/Index'
import search from './modules/search/Index'
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
user: user(),
dashboard: dashboard(),
communities: communities(),
settings: settings(),
search: search(),
},
});
export default store;
I keep getting this error;
TypeError: undefined is not an object (evaluating 'store._modulesNamespaceMap')
Does anyone have any idea? I think I'm not referencing the 'recent' in my computed the right way.
Related
Hi I am trying to get the id from router and to append it to axios get method.
This is the code from store.js
In normal Vue component you can do something like this: id:this.$router.id
but in vuex store is not working
#How can I do the same thing but in Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import Axios from 'axios';
import router from './router'
Vue.use(Vuex)
Vue.use(Axios)
Vue.use(router)
export default new Vuex.Store({
// data() {
// return {
// m_id:this.$route.params.m_id
// }
// },
// m_id : this.$route.params.m_id,
state: {
video_key: [],
},
mutations: {
updateInfo (state , video_key){
state.video_key = video_key
}
},
getters:{
m_id : this.route.params.m_id
},
actions: {
fetchData({commit,getters}){
axios.get(`https://api.themoviedb.org/3/movie/${this.m_id}/videos?api_key=7bc75e1ed95b84e912176b719cdeeff9&language=en-US`)
.then(response =>{
commit('updateInfo',response.data.results[0].key)
})
}
}
})
Replace this.route.params.m_id with router.currentRoute.params.m_id.
You can find more details about router instance properties here: link
I am having an issue calling up an action from my Vue component using this.$store.dispatch('lookupName'). I have tried console logging the this.$store method, but the actions within it are empty.
Main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import { findCertificate } from '#/api';
Vue.use(Vuex)
const state = {
// single source of data
nameLookup: {},
}
const actions = {
// asynchronous operations
lookupName(context, form){
return findCertificate(form)
}
}
const store = new Vuex.Store({
state,
actions,
mutations,
getters
})
export default store
Vue Component
import VueRecaptcha from 'vue-recaptcha';
import { mapGetters, mapActions} from 'vuex'
export default {
created() {
},
methods: {
...mapActions({
lookupName: 'lookupName'
}),
...mapActions({
add: 'lookupName'
}),
onCaptchaVerified: function(recaptchaToken){
this.$refs.recaptcha.reset();
console.log(this.$store.dispatch('lookupName', this.form))
},
}
}
Why am I still getting this error? I have looked up many other people's questions about similar issues, but those solutions did not work for me.
I'm using laravel, vue and vuex in another project with almost identical code and it's working great. I'm trying to adapt what I've done there to this project, using that code as boilerplate but I keep getting the error:
[vuex] unknown action type: panels/GET_PANEL
I have an index.js in the store directory which then imports namespaced store modules, to keep things tidy:
import Vue from "vue";
import Vuex from "vuex";
var axios = require("axios");
import users from "./users";
import subscriptions from "./subscriptions";
import blocks from "./blocks";
import panels from "./panels";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
},
actions: {
},
mutations: {
},
modules: {
users,
subscriptions,
blocks,
panels
}
})
panels.js:
const state = {
panel: []
}
const getters = {
}
const actions = {
GET_PANEL : async ({ state, commit }, panel_id) => {
let { data } = await axios.get('/api/panel/'+panel_id)
commit('SET_PANEL', data)
}
}
const mutations = {
SET_PANEL (state, panel) {
state.panel = panel
}
}
export default {
namespaced: true,
state,
getters,
actions,
mutations
}
Below is the script section from my vue component:
<script>
import { mapState, mapActions } from "vuex";
export default {
data () {
return {
}
},
mounted() {
this.$store.dispatch('panels/GET_PANEL', 6)
},
computed:
mapState({
panel: state => state.panels.panel
}),
methods: {
...mapActions([
"panels/GET_PANEL"
])
}
}
</script>
And here is the relevant code from my app.js:
import Vue from 'vue';
import Vuex from 'vuex'
import store from './store';
Vue.use(Vuex)
const app = new Vue({
store: store,
}).$mount('#bsrwrap')
UPDATE:: I've tried to just log the initial state from vuex and I get: Error in mounted hook: "ReferenceError: panel is not defined. I tried creating another, very basic components using another module store, no luck there either. I checked my vuex version, 3.1.0, the latest. Seems to be something in the app.js or store, since the problem persists across multiple modules.
Once you have namespaced module use the following mapping:
...mapActions("panels", ["GET_PANEL"])
Where first argument is module's namespace and second is array of actions to map.
This is my store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isLoggedIn: !!localStorage.getItem('token'),
isLog : !!localStorage.getItem('situation')
},
mutations: {
loginUser (state) {
state.isLoggedIn = true
state.isLog = true
},
logoutUser (state) {
state.isLoggedIn = false
state.isLog = false
},
}
})
but when I call {{state.isLoggedIn}} in the display.vue, I am not getting the values.
In display.vue, I use
<script>
import axios from "axios";
import store from '../store';
export default {
name: "BookList",
data() {
return {
students: [],
errors: [],
state: this.state.isLoggedIn,
};
},
})
</script>
<template>
{{this.state}}
</template>
But I am getting errors when i done this way. Please can anyone please help what is the problem.
You don't need to import your store into your component. Instead, you should access it using this.$store.
For accessing the store state, the better (and recommended) way is to map the state within your component.
In your example it should be something like:
import { mapState } from 'vuex'
export default {
...
computed: {
...mapState({
isLoggedIn: 'isLoggedIn'
})
}
}
In your template, this is not needed. Just call the property by its name:
{{ isLoggedIn }}
I am trying to use Vuex ("^2.1.3") with vuejs ("^2.1.10") project in this way:
store.js:
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
inTheaters: [
{
name: 'Resident Evil: The Final Chapter',
poster_url: 'https://blackgirlnerds.com/wp-content/uploads/2017/02/Resident-Evil-The-Final-Chapter-Final-Poster-Featured.jpg',
language: 'English',
},
{
name: 'Irada',
poster_url: 'http://filmywave.com/wp-content/uploads/2017/02/irada-movie-poster-1.jpg',
language: 'Hindi',
},
]
},
});
main.js:
import store from './store';
new Vue({
router,
components: {App},
template: '<App/>',
store,
}).$mount('#app');
some-component.js:
<script>
export default {
name: 'movieListWrapper',
props: {
movieListType: {
type: String,
default: 'in-theateras',
},
},
computed: {
movieList() {
return this.$store.state.inTheaters;
}
},
}
</script>
I now have two problems:
First is I get a warning in my console
"export 'default' (imported as 'store') was not found in './store'
The other problem is that the state is not defined.
Uncaught TypeError: Cannot read property 'state' of undefined
I am very new to this and may be I am missing some thing so please pardon me. What am I missing?
In your store.js:
export default new Vuex.Store({ instead of export const store = new Vuex.Store({
Or as #dfsq said import {store} from './store';
//state.js
export const store = new Vuex.Store({
state :{
title :"Welcome in Vuex Tutorials By SK Islam"
}
});
Then in main.js please import the store in this way..
import {store} from "./store/state";
{store}// this is important..