Proper way of using Quasar with Vuex

Dobromir

I decided to do something with Vuex but I kind of got lost.
Where and Should I even add the Vue.use(Vuex) since I saw it added in the index.js file.
Also I saw I should add the Store in the main file, before the router is called, does this mean in the index.js file or in the index.vue?
I looked at the docs over at Vuex but they are a bit different.

Example:
Should I add the store object to every Quasar component that needs to access it? Lets say I want the Modal component to get something from Vuex, I should add my Getter, Store to the Modal`s Vue object, or is there a way to make the store accessible for all?

rstoenescu

There’s no recommended way to use Vuex with Quasar because it depends on what your needs are, how you choose to structure your app and so on.

For example if you use just one store then you can create a new .js file and you can actually import Vuex and tell Vue to use it from there.

// store.js
import Vue from 'vue'

import Vuex from 'vuex' 
Vue.use(Vuex)

// app initial state
const state = {
  count: 0
}

// define possible mutations
const mutations = {
  INCREMENT (state) {
    state.count++
  },
  DECREMENT (state) {
    state.count--
  }
}

// create the store
export default new Vuex.Store({
  state,
  mutations
})

You can also create some actions for your store:

// actions.js
export const increment = ({ dispatch }) => dispatch('INCREMENT')
export const decrement = ({ dispatch }) => dispatch('DECREMENT')

Next you can import this store and actions in every component that you want to use the newly created store. See https://github.com/vuejs/vuex/blob/1.0/docs/en/data-flow.md

Vuex is quite complex. You need to thoroughly read its documentation. There’s no specific way to use it with Quasar. In this respect treat Quasar as any other Vue project. Quasar does not impose any limitations to Vuex.

Dobromir

Yeah, this is basically exactly what I did.

/**
 * Created by Dobromir on 9/21/2016.
 */
//store.js 
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    words: []
  },
  mutations: {
    INCREMENT (state, amount) {
      state.counter = state.counter + amount
    },
    ADDWORD (state, word) {
      state.words.push(word)
    },
    REMOVEWORD (state, wordIndex) {
      state.words = state.words.splice(wordIndex, 1)
    }
  }
})

/**
 * Created by Dobromir on 9/21/2016.
 */
// actions.js
export const addWord = function ({dispatch, state}, word) {
  dispatch('ADDWORD', word)
}

My question was, if I wanted to access the Store in a Modal Component, I should import both the Store and Action/Getter into the Modal, correct? And this goes for every element I use that is not a direct child of my Vue state.

I got confused because I saw that app.js has already a Vue.use(Vuex) on line:24 or so and I didnt want to do some stupid duplicate call or something.

For now I`m loving the framework.

rstoenescu

Yes, import store and actions in modal too. But you can use an inline modal so you won’t have to
http://quasar-framework.org/components/modal.html#Template-Inline-Modal

dpamio

And what about “tracking” the modal state itself? (opened/closed) and their acctions? (open, cancel, accept, etc.)

No More Posting New Topics!

Proper way of using Quasar with Vuex