I have a global store setting which determines which user role could be 'admin', 'editor' or 'junior-editor'.
A the moment I have to import my store and use make the store variable available in the data.
Is there a way to expose this al all my components?
If using Vuex, you can call it on any component using:
this.$store
For example, in an app with a "user" module and the data is called "role", it would be:
this.$store.state.user.role
There is no need to import store into each component. It should be injected in your main app file (main.js or index.js), like:
new Vue({
el: '#app',
router,
store
})
Related
I am using the plugin: https://www.npmjs.com/package/vuex-persist, and it works great. But I am not sure that what I am trying to do will work.
My application has a module of authentication, and the user can create their own settings that are stored in vuex and localstorage. But since there will be different users there will be different settings and that is why each user will have different localStorage, that is why they need to have different name.
In that case I need to change the name of the key setting on the storage plugin dynamically, and I don't know how to do that. The setting for the plugin look like this
import Vue from 'vue'
import App from 'App.vue';
import Vuex 'vuex';
import VuexPersist from 'vuex-persist';
Vue.use(Vuex);
const vuexLocalStorage = new VuexPersist({
key: 'vuex' // I WANT TO CHANGE THIS DYNAMICALLY, how to do that?
storage: window.localStorage, // or window.sessionStorage or localForage
// Function that passes the state and returns the state with only the objects you want to store.
// reducer: state => state,
// Function that passes a mutation and lets you decide if it should update the state in localStorage.
// filter: mutation => (true)
})
const store = new Vuex.Store({
...
plugins: [vuexLocalStorage.plugin]
});
...
new Vue({
store,
el: '#app',
render: h => h(App)
});
I tried about everything but I just can't figure it out. Asking some help from Vue pros :D
import calendar_component from "./components/calendar_component.js";
import AKAD from "./ADAKNotes_revamp.js";
import list_component from "./components/list_component.js";
const AKAD_app = new Vue({
el: "#app",
components: [calendar_component, list_component]
});
// [[Vue warn]: Unknown custom element: <list-comp> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
From Vue API Guide, it is one object for {components } instead of one array.
So try below codes:
const AKAD_app = new Vue({
el: "#app",
components: {calendar_component, list_component}
// or assign special id for components {'calendar': calendar_component, 'list-comp': list_component}
});
I'm having difficulties accessing my api within my store modules. I've created an instance of my api, passed it within my vue creation just like the store. However when trying to implement logic in my module, the this.$api does not work like it works in my components. Is there any way to access my already created instance of api?
const api = new Api();
/* eslint-disable no-new */
new Vue({
components: {App},
router,
api, // <--- I want this.
store, // <--- To be accesable in the modules of this
template: '<App/>'
}).$mount('#app');
So can I access the api instance without creating a new instance in my module or store?
I think you should be able to inject api directly to store, like this:
const store = new Vuex.Store();
const $axios = axios.create();
store.$axios = $axios;
new Vue({
components: {App},
router,
store,
template: '<App/>'
}).$mount('#app');
Anyways, for Axios, it worked fine: https://forum.vuejs.org/t/accessing-axios-in-vuex-module/29414/3
I'm integrating Vue onto a site for forms, which means I have to create several instances of that Vue application if there are multiple forms on the page. All instances share the same Vuex store.
I created a Vuex module so that each Vue instance could have it's own local state. My main goal is to prevent one Vue instance from updating the state of another Vue instance.
Here's my Vuex module
export default {
state() {
return {
stateObj: {...}
}
}
}
Creating my Vuex instance:
export default new Vuex.Store({
modules: {
form
}
})
I was reading the Vuex docs and it says you need to use a function that returns the modules state, which is what I'm doing. However, when I update the module's state in one my Vue instances, it updates the all other Vue instance's module state.
Here's the section in the Vuex docs I am referring to.
The reason this is happening is that you are not really creating multiple instances of form module or your store. You are essentially creating multiple instances of Vue applications, that is you are having multiple Root Vue Instances.
However, your store code clearly suggests that you are creating a single instance of Vuex store by exporting an instance like: export default new Vuex.Store({ /**/ }).
If you have multiple root instances i.e. multiple Vue applications, then you need multiple instances of the Vuex Store. Your code would be something like:
// store.js - Note: Do not return singleton store
export default function makeStore() {
return new Vuex.Store({
modules: { form }
});
}
// main.js/root.js
import makeStore from './store.js';
// Creating multiple instances of root instance and Vuex store.
const app1 = new Vue({ store: makeStore() });
const app2 = new Vue({ store: makeStore() });
This should solve your problem. Though this design is not uncommon, you should still take a step back and think - what if you need to share data across all these apps? Since there are multiple instances, you cannot do that easily. As long as all these forms are working in isolation, it should be fine.
Alternately, if you have to really make single instance of your store, then consider changing your store design. You should have a single root instance/app and use v-for to generate multiple forms. Similarly, on the store side, you would have an array to maintain a collection of all the forms.
Importing vuex file with different name other than store (like "test" here). I cannot access vuex modules in Child Component like " this.$test ". How can I solve this. I need to make vuex import name other than store and accessing in child component with "this.$test" .
import {test} from './vuex/store.js';
const app = new Vue({
el: '#app',
test
});
Any help will be highly appreciated.
Assuming your store.js has a named export store:
Just use as:
import {store as test} from './vuex/store.js';
If that doesn't work, your store.js probably only has a default export. In that case, just omit the curly braces and proceed as you tried:
import test from './vuex/store.js';
You can do it like this.
import storeMessagerie from './store/store-messagerie'
new Vue({
el: '#messagerie',
components: { Messagerie},
store : storeMessagerie,
router
});
source : https://vuex.vuejs.org/guide/#the-simplest-store