Vuex is perfectly compatible with typescript using these vuex imports: import {GetterTree, MutationTree, ActionTree} from “vuex” The example below shows the easiest and most complete way to use vuex in typescript. Principal store file: import Vue from ‘vue’ import Vuex from ‘vuex’ import { GetterTree, MutationTree, ActionTree } from “vuex” import MySubModule from ‘@/store/submodule’ Vue.use(Vuex) … Read more
In short, Pinia’s API is much simpler and intuitive. It makes using stores a breeze, even for junior devs. It brings the benefits of Composition API, but has a structure which greatly resembles the Options API, which you’re probably familiar with: has a reactive state, equivalent of data function in Options API has getters, equivalent … Read more
It will cause a mess, you are correct. This is one of the problems that vuex solves. So how do you decide whether to pass props or use vuex? When i say use vuex, i mean to access the store data directly from the component that needs it. The trick is to consider each piece … Read more
Try this: import { mapGetters, mapActions} from ‘vuex’ computed: { …mapGetters({ companies: ‘company/allCompanies’ }) } methods: { …mapActions([‘company/getCompanies’, ‘company/getEmployees’]) }, mounted() { this[‘company/getCompanies’](); }, But, I like to do namespacing as done below, but it has an issue, refer the issue here. methods: { …mapActions(‘company’, [‘getCompanies’, ‘getEmployees’]) }, mounted() { this.getCompanies(); this.getEmployees(); },
It is possible to access the store as an object in an external js file, I have also added a test to demonstrate the changes in the state. here is the external js file: import { store } from ‘../store/store’ export function getAuth () { return store.state.authorization.AUTH_STATE } The state module: import * as NameSpace … Read more
Change this: getProducts({commit}, type) { axios.get(`/api/products/${type}`) .then(res => { let products = res.data; commit(‘SET_PRODUCTS’, {products, type}) }).catch(err => { console.log(err); }) }, To this: getProducts({commit}, type) { return axios.get(`/api/products/${type}`) .then(res => { let products = res.data; commit(‘SET_PRODUCTS’, {products, type}) }).catch(err => { console.log(err); }) }, Should work. axios.get returns a promise. You would need to … Read more
Both can be correct depending on your use case. The application I’m currently building uses both. When to use B: Go Directly to the server Use B if the data is very important to save. In this case you may want to go directly to the server and serve up the response to verify it … Read more
So best way to accomplish to me would be to dispatch actions instead of committing the mutations. If you look at the methods in Vuex source, commit only executes with no return (so is a void) and dispatch returns the value you return from the action (which is a function) For my actions, i always … Read more
1. First of all I’d use a Vuex Module as this Login/Session behavior seems to be ideal for a Session module. After that (which is totally optional) you can set up a Getter to avoid accessing the state itself from outside Vuex, you’d would end up with something like this: state: { // bear in … Read more
If your getter takes in a parameter like this: getters: { foo(state) { return (bar) => { return bar; } } } Then you can map the getter directly: computed: { …mapGetters([‘foo’]) } And just pass in the parameter to this.foo: mounted() { console.log(this.foo(‘hello’)); // logs “hello” }