Add vuex-map-fields to Quasar

DarkLite1

It would be great to be able to use the functions provided by the pacakge vuex-map-fields. In normal circumstances I would just add the following to main.js:

import Vue from 'vue';
import Vuex from 'vuex';

// Import the `getField` getter and the `updateField`
// mutation function from the `vuex-map-fields` module.
import { getField, updateField } from 'vuex-map-fields';

Vue.use(Vuex);

export default new Vuex.Store({

So now I’m trying to find the correct way to add this to the Quasar project I’m working on. After reading the documentation I thought it would be needed to create a ‘boot’ file like it is for the axios package.

I’ve also found someone adding the import statement straight to the index. js file. This probably requires me to add the import statement to every seperate module in the vuex store.

Or would it be better to add it in every getters.js like so:

import { getField } from 'vuex-map-fields';

export function getField()

And then do an import in the script section of each component:

import { mapFields } from 'vuex-map-fields';

What would be the best/correct way to be able to use these helpers?

tof06

Hi @DarkLite1 ,

I don’t know if this is the best way, but here’s how I did :

// store/<module>/index.php
import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'
import { getField, updateField } from 'vuex-map-fields'

export default {
  namespaced: true,
  state,
  getters: {
    ...getters,
    getField
  },
  mutations: {
    ...mutations,
    updateField
  },
  actions
}

I do this on every module I need vuex-map-fields

Then, in my components :

import { mapFields } from 'vuex-map-fields'

export default {
  // ...
  computed: {
    ...mapFields('<modulename>', { // state vars })
  }
  // ...

DarkLite1

Thank you very much! That’s an awesome use of the spread operator! In the docs Namespaced Vuex modules they tell you to do this in the component:

import { createHelpers } from 'vuex-map-fields';

// `fooModule` is the name of the Vuex module.
const { mapFields } = createHelpers({
  getterType: 'fooModule/getField',
  mutationType: 'fooModule/updateField',
});

export default {
  computed: {
    ...mapFields(['foo']),
  },
};

Your way of doing it looks easier/cleaner but does it also work for named modules?

tof06

@DarkLite1 said in Add vuex-map-fields to Quasar:

Your way of doing it looks easier/cleaner but does it also work for named modules?

Yes
It’s also stated in the documentation :

Or you can pass the module namespace string as the first argument of the mapFields() function.

<template>
 <div id="app">
   <input v-model="foo">
 </div>
</template>

<script>
import { mapFields } from 'vuex-map-fields';

export default {
 computed: {
   // `fooModule` is the name of the Vuex module.
   ...mapFields('fooModule', ['foo']),
 },
};
</script>

Using the object or array notation for the second parameter of mapField will depend on if you want to rename your state’s var or not.

DarkLite1

Awesome! Thank you very much for the help. I’m still new to web devlopment and figuring things out as we go. Appreciate the help.
#stayhomestaysafe

DarkLite1

@tof06 if you ever want to try something new and possibly better, you should give vuex-patify a go. I’m sure you’ll love it.

qyloxe

@DarkLite1 said in Add vuex-map-fields to Quasar:

@tof06 if you ever want to try something new and possibly better, you should give vuex-patify I go. I’m sure you’ll love it.

Thanks. Pathify looks interesting. Let’s don’t forget about vuex-orm, too - it is getting better and better lately:

https://vuex-orm.org/

DarkLite1

Oooh, that looks really nice! That might come in handy at some point. Thanks for this valuable tip!

No More Posting New Topics!

Add vuex-map-fields to Quasar