When adding vuex or vue-router as plugin in vue and using the options api you could access these plugins with the this keyword.
main.js
import { createApp } from 'vue';
import i18n from '#/i18n';
import router from './router';
import store from './store';
app.use(i18n);
app.use(store);
app.use(router);
RandomComponent.vue
<script>
export default {
mounted() {
this.$store.dispatch('roles/fetchPermissions');
},
}
</script>
The this keyword is no longer available with the composition api which leads to a lot of repetitive code. To use the store, vue-router or the i18n library I have to import and define the following:
RandomComponent.vue with composition api
<script setup>
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const router = useRouter();
const store = useStore();
const { t } = useI18n();
const { handleSubmit, isSubmitting, errors } = useForm('/roles/create', role, CreateRoleValidationSchema, () => {
store.dispatch('notifications/addNotification', {
type: 'success',
title: t('create_success', { field: t('role', 1) }),
});
router.push({ name: 'roles' });
});
</script>
Is there a way to avoid these imports and definitions and have a way to easily use these plugins like I could do with the options api?
There is no built-in way of doing that in Composition API and script setup.
What you could do is:
Create a plugins.js file that exports common bindings you want to import. For example:
export * from 'vuex'
export * from 'vue-router'
export * from 'vue-i18n'
And then you have only 1 import to do:
<script setup>
import { useStore, useRouter, useI18n } from './plugins'
const router = useRouter();
const store = useStore();
const { t } = useI18n();
const { handleSubmit, isSubmitting, errors } = useForm('/roles/create', role, CreateRoleValidationSchema, () => {
store.dispatch('notifications/addNotification', {
type: 'success',
title: t('create_success', { field: t('role', 1) }),
});
router.push({ name: 'roles' });
});
</script>
You can go even further by initiating the plugins like:
import { useStore, useRouter, useI18n } from './plugins'
export function initiateCommonPlugins() {
const router = useRouter();
const store = useStore();
const { t } = useI18n();
return { router, store, t }
}
And your code then will look like this:
<script setup>
import { router, store, t } from './initiate-plugins'
const { handleSubmit, isSubmitting, errors } = useForm('/roles/create', role, CreateRoleValidationSchema, () => {
store.dispatch('notifications/addNotification', {
type: 'success',
title: t('create_success', { field: t('role', 1) }),
});
router.push({ name: 'roles' });
});
</script>
Use unplugin-auto-import plugin
This plugin can eliminate all imports you want and is highly customizable. Haven't tried it yet but I have seen people recommend it.
Stick to Options API
Using Vue 3 doesn't mean that you have to use Composition API for creating components. You can use Options API along with script setup for composables instead of Mixins.
So Options API for components, Composition API for reusing code or advanced use-cases.
Related
I have a "standalone" component which is set up as a Vue plugin (to be downloaded via npm and used in projects) and it uses pinia, but it looks like multiple instances of the component share the same pinia state. Is there a way to set up pinia such that each component instance has its own state?
The component is made up of multiple sub-(sub)-components and I'm using pinia to manage its overall state. Imagine something fairly complex like a <fancy-calendar /> component but you could have multiple calendars on a page.
I have the standard pinia set up in an index.js:
import myPlugin from "./myPlugin.vue";
import { createPinia } from "pinia";
const pinia = createPinia();
export function myFancyPlugin(app, options) {
app.use(pinia);
app.component("myPlugin", myPlugin);
}
Then myPlugin.vue has:
<script setup>
import { useMyStore } from '#/myPlugin/stores/myStore'
import { SubComponent1 } from '#/myPlugin/components/SubComponent1'
import { SubComponent2 } from '#/myPlugin/components/SubComponent2'
...
const store = useMyStore()
The sub-components also import the store. Also some of the sub-components also have their own sub-components which also use the store.
myStore.js is set up like this:
import { defineStore } from "pinia";
export const useMyStore = defineStore("myStore", {
state: () => ({
...
}),
getters: {
...
},
actions: {
...
}
});
Edit: This is the solution I ended up using:
myStore.js:
import { defineStore } from "pinia"
export const useMyStore = (id) =>
defineStore(id, {
state: () => ({
...
}),
getters: {},
actions: {},
})();
myPlugin.vue
...
<script setup>
import { provide } from "vue"
import { useMyStore } from '#/MyNewPlugin/stores/MyStore'
import { v4 } from "uuid"
const storeId = v4()
provide('storeId', storeId)
const store = useMyStore(storeId)
...
SubComponent1.vue
<script setup>
import { inject } from "vue"
import { useMyStore } from '#/MyNewPlugin/stores/MyStore'
const storeId = inject('storeId')
const store = useMyStore(storeId)
</script>
A simple way of solving this is to create a stores map, using unique identifiers:
When you init a new instance of the root component of your plugin, you create a unique identifier for the current instance:
import { v4 } from 'uuid'
const storeId = v4();
You pass this id to its descendants via props or provide/inject.
Whenever a descendent component calls the store, it calls it with the storeId:
const store = useMyStore(storeId)
Finally, inside myStore:
const storesMap = {};
export const useMyStore = (id) => {
if (!storesMap[id]) {
storesMap[id] = defineStore(id, {
state: () => ({ ... }),
actions: {},
getters: {}
})
}
return storesMap[id]()
}
Haven't tested it, but I don't see why it wouldn't work.
If you need hands-on help, you'll have to provide a runnable minimal reproducible example on which I could test implementing the above.
I'm creating an application based on this code from github.
I need change vue resources to axios, how i can do that ?
I would like to know how to do this keeping the structure of this code.
I'm using vue 3.
Anyone who can help would be very grateful :)
the full code i'm modifying: here
http:
import Vue from 'vue'
import VueResource from 'vue-resource'
import services from './services'
Vue.use(VueResource)
const http = Vue.http
http.options.root = 'https://localhost.com/api'
Object.keys(services).map(service =>{
services[service] = Vue.resource('', {}, services[service])
})
export { http }
export default services
http services:
import { services as auth } from '#/modules/auth'
export default {
auth
}
Actions:
import services from '#/http'
import * as types from './mutation-types'
export const ActionDoLogin = (context, payload) =>{
return services.auth.login(payload)
}
export const ActionSetUser = ({ commit }, payload) => {
commit(types.SET_USER, payload)
}
export const ActionSeToken = ({ commit }, payload) => {
commit(types.SET_TOKEN, payload)
}
Services:
export default {
login: { method: 'post', url: 'login' }
}
Main:
import { createApp } from 'vue'
import App from './App'
import router from './router'
import store from './store'
import './assets/scss/app.scss'
createApp(App).use(store).use(router).mount('#app')
Login view:
<script>
import {mapActions} from 'vuex'
export default {
data: () =>({
form:{
email:'',
pass:''
}
}),
methods:{
...mapActions('auth', ['ActionDoLogin']),
submit(){
this.ActionDoLogin(this.form).then(res =>{
console.log(res.data)
})
}
}
}
</script>
I'm having trouble getting a mock action to run using Vue3 while testing with vitest.
I have a component which calls out to a modularized vuex store that is imported into my component using the composition api. Something like the following.
export default defineComponent({
setup() {
const { doAction } = useModActions([
'doAction'
])
}
})
I use createNamespacedHelpers to setup my store module from the vuex-composition-helpers library.
After I use useStore with a Symbol key to setup the state of my store. I consume it in my application by doing
app.use(store, key)
To mock it in my tests I was trying the following
const actions = {
doAction: vi.fn()
}
const spy = vi.spyOn(actions, 'doAction')
const mockStore = createStore({
modules: {
mod: {
namespaced: true,
actions
}
}
})
const wrapper = mount(Component, {
global: {
provide: { [key]: mockStore }
}
})
But my spy is never called and my component always calls the original implementation. Is there a way to get all these pieces working together?
The mockStore here (from Vuex's createStore()) is an instance of a Vue plugin, which should be passed to the global.plugins mounting option (not global.provide):
// MyComponent.spec.js
import { describe, it, expect, vi } from 'vitest'
import { mount } from '#vue/test-utils'
import { createStore } from 'vuex'
import MyComponent from '../MyComponent.vue'
describe('MyComponent', () => {
it('button calls doAction', async () => {
const actions = {
doAction: vi.fn(),
}
const mockStore = createStore({
modules: {
myModule: {
namespaced: true,
actions,
},
},
})
const wrapper = mount(MyComponent, {
global: {
plugins: [mockStore], // 👈
},
})
await wrapper.find("button").trigger("click")
expect(actions.doAction).toHaveBeenCalled()
})
})
demo
I am using Vue 3 including the Composition API and additionally Pinia as State Management.
In the options API there is a method beforeRouteEnter, which is built into the component itself. Unfortunately this method does not exist in the composition API. Here the code, which would have been in the beforeRouteEnter method, is written directly into the setup method. However, this means that the component is loaded and displayed first, then the code is executed and, if the check fails, the component is redirected to an error page, for example.
My idea was to make my check directly in the route configuration in the beforeEnter method of a route. However, I don't have access to the Pinia Store, which doesn't seem to be initialized yet, although it is called before in the main.js.
Console Log
Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
const pinia = createPinia()
app.use(pinia)
This will fail in production.
Router.js
import { useProcessStore } from "#/store/process";
const routes: Array<RouteRecordRaw> = [
{
path: "/processes/:id",
name: "ProcessView",
component: loadView("ProcessView", "processes/"),
beforeEnter: () => {
const processStore = useProcessStore();
console.log(processStore);
},
children: [
{
path: "steer",
name: "ProcessSteer",
component: loadView("ProcessSteer", "processes/")
},
{
path: "approve/:code",
name: "ProcessApprove",
component: loadView("ProcessApprove", "processes/")
}
]
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;
main.js
import { createApp } from "vue";
import "#/assets/bundle-bootstrap.css";
import App from "#/App.vue";
import { createPinia } from "pinia";
import router from "#/router";
import SvgIcon from "#/components/SvgIcon.vue";
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.use(router);
app.component("SvgIcon", SvgIcon);
router.isReady().then(() => {
app.mount("#app");
});
However, I don't have access to the Pinia Store, which doesn't seem to be initialized yet, although it is called before in the main.js
Before what? Pinia instance is created with const pinia = createPinia(); after the router module is imported - while it is imported, all side-effects including the call to createRouter() are executed. Once the router is created it begins it's initial navigation (on client - on server you need to trigger it with router.push()) - if you happen to be at URL matching the route with guard that is using Pinia store, the useProcessStore() happens before Pinia is created...
Using a store outside of a component
You have two options:
either you make sure that any useXXXStore() call happens after Pinia is created (createPinia()) and installed (app.use(pinia))
or you pass the Pinia instance into any useXXXStore() outside of component...
// store.js
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;
// router.js
import pinia from "#/store.js";
import { useProcessStore } from "#/store/process";
const routes: Array<RouteRecordRaw> = [
{
path: "/processes/:id",
name: "ProcessView",
component: loadView("ProcessView", "processes/"),
beforeEnter: () => {
const processStore = useProcessStore(pinia ); // <-- passing Pinia instance directly
console.log(processStore);
},
},
];
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
export default router;
// main.js
import { createApp } from "vue";
import App from "#/App.vue";
import store from "#/store.js";
import router from "#/router";
const app = createApp(App);
app.use(store);
app.use(router);
router.isReady().then(() => {
app.mount("#app");
});
Hope this would be helpful.
Vue provide support for some functions in which we need store(outside of the components).
To fix this problem I just called the useStore() function inside the function provided by Vue(beforeEach) and it worked.
Reference : https://pinia.vuejs.org/core-concepts/outside-component-usage.html
Example :
import { useAuthStore } from "#/stores/auth";
.
.
.
.
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
});
router.beforeEach(async (to, from) => {
const authStore = useAuthStore();
// use authStore Here
});
I have same problem to access the store in "beforeEach" method for managing authorization.
I use this method in main.js, not in router.js. in router.js store is not accessible.
create pinia instance in piniCreate.js
//piniaCreate.js
import { createPinia } from "pinia";
const pinia = createPinia();
export default pinia;
after that create my store in mainStore.js
import { defineStore } from 'pinia'
export const mainStore = defineStore('counter', {
state: () => {
return {
user: {
isAuthenticated: isAuthen,
}
}
},
actions: {
login(result) {
//...
this.user.isAuthenticated = true;
} ,
logOff() {
this.user.isAuthenticated = false;
}
}
});
Then I used beforeEach method in the main.js
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import pinia from "#/stores/piniaCreate";
import { mainStore } from '#/stores/mainStore';
import router from './router'
const app = createApp(App)
.use(pinia)
.use(router)
const store1 = mainStore();
router.beforeEach((from) => {
if (from.meta.requiresAuth && !store1.user.isAuthenticated) {
router.push({ name: 'login', query: { redirect: from.path } });
}
})
app.mount('#app');
You can pass the method in the second parameter of definestore:
store.js
export const useAppStore = defineStore('app', () => {
const state = reactive({
appName: 'App',
appLogo: ''
})
return {
...toRefs(state)
}
})
router.js
router.beforeEach((to, from, next) => {
const apppStore = useAppStore()
next()
})
I have resolved this by adding lazy loading
const routes = [
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
I am having some difficulty understanding how Veux 4 createStore() works.
In /store/index.js I have (amongst a few other things):
export function createVuexStore(){
return createStore({
modules: {
userStore,
productStore
}
})
}
export function provideStore(store) {
provide('vuex-store', store)
}
In client-entry.js I pass the store to makeApp() like this:
import * as vuexStore from './store/index.js';
import makeApp from './main.js'
const _vuexStore = vuexStore.createVuexStore();
const {app, router} = makeApp({
vuexStore: _vuexStore,
});
And main.js default method does this:
export default function(args) {
const rootComponent = {
render: () => h(App),
components: { App },
setup() {
vuexStore.provideStore(args.vuexStore)
}
}
const app = (isSSR ? createSSRApp : createApp)(rootComponent);
app.use(args.vuexStore);
So, there is no store that is exported from anywhere which means that I cannot import store in another .js file like my vue-router and access the getters or dispatch actions.
import {store} '../store/index.js' // not possible
In order to make this work, I did the following in the vue-router.js file which works but I don't understand why it works:
import * as vuexStore from '../store/index.js'
const $store = vuexStore.createVuexStore();
async function testMe(to, from, next) {
$store.getters('getUser'); // returns info correctly
$store.dispatch('logout'); // this works fine
}
Does Veux's createStore() method create a fresh new store each time or is it a reference to the same store that was created in client-entry.js? It appears it is the latter, so does that mean an application only has one store no matter how many times you run createStore()? Why, then, does running createStore() not overwrite the existing store and initialise it with blank values?
createStore() method can be used on your setup method.
On your main.js, you could do something like this
import { createApp } from 'vue'
import store from './store'
createApp(App).use(store).use(router).mount('#app')
store.js
import { createStore } from 'vuex';
export default createStore({
state: {},
mutations: {},
actions: {},
});
To access your store, you don't need to import store.js anymore, you could just use the new useStore() method to create the object. You can directly access your store using it just as usual.
your-component.js
<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
setup() {
const store = useStore();
const isAuthenticated = computed(() => store.state.isAuthenticated);
const logout = () => store.dispatch("logout");
return { isAuthenticated, logout };
},
};
</script>
To use your store in the route.js file, you could simply imported the old fashion way.
route.js
import Home from '../views/Home.vue'
import store from '../store/'
const logout = () => {
store.dispatch("auth/logout");
}
export const routes = [
{
path: '/',
name: 'Home',
component: Home
}
]