I am getting a blank white screen when running "npm run serve" .In the browser console it says that
I am using ,Vue3 , Vuetifiy , Vuex4 and vue-router.
Here is my index.js file for vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
}
})
And my github repo link : https://github.com/mertpinarbasi/vue-to-do
Related
I'm getting very confused about calling a vuex state inside the Vuetify.js plugin.
My project is to translate a website based on the users preferred language. I've completely setup the translations with i18n. This project consists of 2 parts.
The translation based on JSON files (This is working just fine)
The translation of the Vuetify components based on the translations provided by Vuetify.
The 2nd point is where I get stuck.
According to the manual from Vuetify you need to import the needed language files inside the Vuetify.js plugin. This all works perfect.
But...I can only change it manually....
What I want to achieve is that the correct Vuetify language gets set based in the language set inside my vuex store.
Believe me, I've been search the internet for days and tried everything that I could find. But nothing seems to work. I can't seem to figure out how to call the vuex state inside the Vuetify.js plugin.
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
import nl from 'vuetify/es5/locale/nl'
import fr from 'vuetify/es5/locale/fr'
import en from 'vuetify/es5/locale/en'
Vue.component('my-component', {
methods: {
changeLocale() {
this.$vuetify.lang.current
},
},
})
export default new Vuetify({
lang: {
locales: { nl, en, fr },
current: "nl",
},
})
So the state of current should be based on the state in my vuex store.
Here is my vuex store
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import i18n, { selectedLocale } from './i18n'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
locale: selectedLocale
},
mutations: {
updateLocale(state, newLocale) {
state.locale = newLocale
}
},
actions: {
changeLocale({ commit }, newLocale) {
i18n.locale = newLocale
commit('updateLocale', newLocale)
}
},
plugins: [createPersistedState()]
})
Who can point me in the right direct on who to go about this?
When you change the locale in i18n you should also change it in Vuetify:
export default new Vuex.Store({
state: {
locale: selectedLocale
},
mutations: {
updateLocale(state, newLocale) {
state.locale = newLocale
}
},
actions: {
changeLocale({ commit }, { newLocale, currentVueComponent }) {
i18n.locale = newLocale
currentVueComponent.$vuetify.lang.current = newLocale // <--- the important code
commit('updateLocale', newLocale)
}
},
plugins: [createPersistedState()]
})
I have a Vue Electron app created with Vue CLI Plugin Electron Builder and I try to integrate vuex, having the following store structure
import Vue from "vue";
import Vuex from "vuex";
import { createPersistedState, createSharedMutations } from "vuex-electron";
import user from "./modules/user";
const debug = process.env.NODE_ENV !== "production";
Vue.use(Vuex);
// eslint-disable-next-line no-console
console.log(user);
export default new Vuex.Store({
modules: {
user
},
plugins: [createPersistedState(), createSharedMutations()],
strict: debug
});
when I try to dispatch actions in App.vue
created() {
const userInDb = UserCotroller.getUser();
this.$store.disptach("setUser", userInDb);
}
I get
"TypeError: this.$store.disptach is not a function"
How do I use vuex in this setup?
you have a typo there:
created() {
const userInDb = UserCotroller.getUser();
this.$store.disptach("setUser", userInDb);
}
change this to:
created() {
const userInDb = UserCotroller.getUser();
this.$store.dispatch("setUser", userInDb);
}
you wrote disptach instead of the correct one dispatch
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.
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.
I created a sample Vuex project and did the following steps to add Vuex-Flash message to the project:
$ npm install --save vuex-flash
in main.js:
import VuexFlash from 'vuex-flash';
Vue.use(VuexFlash, { mixin: true });
in store.js:
import Vue from 'vue'
import Vuex from 'vuex'
import { createFlashStore } from 'vuex-flash';
Vue.use(Vuex)
export default new Vuex.Store({
state: {
title: 'My Custom Title'
},
plugins: [
createFlashStore()
]
})
in a component:
methods: {
test: function () {
this.flash({ message: 'some message', variant: 'success' });
}
}
but when I call test() nothing happens. What did I miss or do wrong?