Using store in component with Quasar Using store in component with Quasar vue.js vue.js

Using store in component with Quasar


import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  modules: {    // general state    app},mutations: {    someMutation (state, store) {    }  }, actions: {    someAction ({commit}) {    },})export default store

Also don't forget to include this store in app.js


It took me a while to get it working but here is an example of my state

    user :        {            uid: '',            name: '',            accountType: ''        }}const mutations = {    setName (state, val) {        state.user.name = val    },    setUID (state, val) {        state.user.uid = val    },    setAccountType (state, val) {        state.user.accountType = val    }}const actions = {}const getters = {    user: (state) => {        return state.user    }}export default {    namespaced: true,    state,    mutations,    actions,    getters}

then in each file if you want to access this information you have to use

    computed : {      user () {            return this.$store.getters['user/user']        }    }

I wanted to display this information in my tags and can do so with

<template>    <div class="user-profile">        {{ user.name }}        {{ user.email }}        {{ user.accountType }}    </div></template>

hope that helps.

note rather than a folder with my modules I have it all in one file 'store-user.js' and in my store/index.js I have import user from './store-user'and

export default function (/* { ssrContext } */) {  const Store = new Vuex.Store({    modules: {      user    }    // enable strict mode (adds overhead!)    // for dev mode only    strict: process.env.DEV  })  return Store}