Creating separate Vuex stores for dynamic components

Question

Creating separate Vuex stores for dynamic components

This question really had me stumped for a while. I couldn't find the answer here (asking around didn't help either). However, after conducting some research and seeking advice from various sources, I believe I have finally arrived at a solution to this problem.

If you have a question that you already know the answer to, and you would like to share that knowledge publicly so that others (including yourself) can benefit from it later on.

Admittedly, my solution may not be perfect - in fact, I am well aware that it is not. That's precisely why I'm sharing it here - to receive feedback and improve upon it.

It's important to note that I did not utilize any actions in this example. The concept remains the same.

Let's start by defining the issue at hand:

Imagine we have a file called App.vue which dynamically generates its own local component named Hello.

<template>
  <div id="app">
    <div>
      <hello v-for="i in jobs" :key="i" :id="i"></hello>
      <button @click="addJob">New</button>
    </div>
  </div>
</template>   

<script>
import Hello from './components/Hello'

export default {
  components: {
    Hello
  }...

store.js

export const store = new Vuex.Store({
  state: {
    jobs: []
  }
})

We are using the v-for directive to generate components by looping through an array called jobs. Our current store only consists of a single state with an empty array. The New button should perform two tasks:

1) create a new component Hello, essentially adding an element to the jobs array (let them be numbers), which will serve as the key and id for the <hello> component, and then passed as props to the local component.

2) generate individual stores - known as modules - to contain data specific to each newly created component.

Hello.vue

<template>
  <div>
    <input type="number" :value="count">
    <button @click="updateCountPlus">+1</button>
  </div>
</template>

export default {
  props: ['id']
}

A straightforward component featuring an input field and a button that increments the count by 1.

Our objective is to achieve something along these lines: https://i.sstatic.net/6MA1X.jpg

javascript module store vuex on-the-fly

Answer 1

Answer №1

When initializing the NEW button for the first task - creating components - a mutation is added to our store.js

 mutations: {
    addJob (state) {
      state.jobs.push(state.jobs.length + 1)
...
}

Next, developing local modules. In this step, we utilize reusableModule to produce multiple instances of a module. This module is stored in a separate file for convenience. Additionally, a function is used to define the module's state.

const state = () => {
  return {
    count: 0
  }
}

const getters = {
  count: (state) => state.count
}

const mutations = {
  updateCountPlus (state) {
    state.count++
  }
}

export default {
  state,
  getters,
  mutations
}

In order to implement reusableModule, it must be imported and dynamically registered as a module.

store.js

import module from './reusableModule'

const {state: stateModule, getters, mutations} = module

export const store = new Vuex.Store({
  state: {
    jobs: []
  },
  mutations: {
    addJob (state) {
      state.jobs.push(state.jobs.length + 1)
      store.registerModule(`module${state.jobs.length}`, {
        state: stateModule,
        getters,
        mutations,
        namespaced: true // making our module reusable
      })
    }
  }
})

Following that, we establish a connection between Hello.vue and its storage. Accessing the storage requires defining our own getters and mutations.

Home.vue

<script>

export default {
  props: ['id'],
  computed: {
     count () {
        return this.$store.getters[`module${this.id}/count`]
     }
  },
  methods: {
    updateCountPlus () {
        this.$store.commit(`module${this.id}/updateCountPlus`)
     } 
  }
}
</script>

While managing numerous getters, mutations, and actions, consider utilizing {mapGetters} or {mapMutations} for efficiency when working with multiple modules.

The code associated with these helpers executes when the component's module is initialized during app launch, not when the component is created. Hence, the utilization of these helpers is limited to cases where the module name is known beforehand.

A practical approach involves separating getters and mutations into objects to maintain clarity and organization within the code structure.

<script>
import computed from '../store/moduleGetters'
import methods from '../store/moduleMutations'

export default {
  props: ['id'],
  computed,
  methods
}
</script>

Returning to the App component, remember to execute the necessary mutation along with creating relevant getters to access data residing in the modules.

store.js

export const store = new Vuex.Store({
  state: {
    jobs: []
  },
  getters: {
    jobs: state => state.jobs,
    sumAll (state, getters) {
      let total = 0
      for (let i = 1; i <= state.jobs.length; i++) {
        total += getters[`module${i}/count`]
      }
      return total
    }
  } 
...

To complete the code in the App component:

<script>
import Hello from './components/Hello'
import {mapMutations, mapGetters} from 'vuex'

    export default {
      components: {
        Hello
      },
      computed: {
        ...mapGetters([
          'jobs',
          'sumAll'
        ])
      },
      methods: {
        ...mapMutations([
          'addJob'
        ])
      }
    }
    </script>

Answer 2

When initializing the NEW button for the first task - creating components - a mutation is added to our store.js

 mutations: {
    addJob (state) {
      state.jobs.push(state.jobs.length + 1)
...
}

Next, developing local modules. In this step, we utilize reusableModule to produce multiple instances of a module. This module is stored in a separate file for convenience. Additionally, a function is used to define the module's state.

const state = () => {
  return {
    count: 0
  }
}

const getters = {
  count: (state) => state.count
}

const mutations = {
  updateCountPlus (state) {
    state.count++
  }
}

export default {
  state,
  getters,
  mutations
}

In order to implement reusableModule, it must be imported and dynamically registered as a module.

store.js

import module from './reusableModule'

const {state: stateModule, getters, mutations} = module

export const store = new Vuex.Store({
  state: {
    jobs: []
  },
  mutations: {
    addJob (state) {
      state.jobs.push(state.jobs.length + 1)
      store.registerModule(`module${state.jobs.length}`, {
        state: stateModule,
        getters,
        mutations,
        namespaced: true // making our module reusable
      })
    }
  }
})

Following that, we establish a connection between Hello.vue and its storage. Accessing the storage requires defining our own getters and mutations.

Home.vue

<script>

export default {
  props: ['id'],
  computed: {
     count () {
        return this.$store.getters[`module${this.id}/count`]
     }
  },
  methods: {
    updateCountPlus () {
        this.$store.commit(`module${this.id}/updateCountPlus`)
     } 
  }
}
</script>

While managing numerous getters, mutations, and actions, consider utilizing {mapGetters} or {mapMutations} for efficiency when working with multiple modules.

The code associated with these helpers executes when the component's module is initialized during app launch, not when the component is created. Hence, the utilization of these helpers is limited to cases where the module name is known beforehand.

A practical approach involves separating getters and mutations into objects to maintain clarity and organization within the code structure.

<script>
import computed from '../store/moduleGetters'
import methods from '../store/moduleMutations'

export default {
  props: ['id'],
  computed,
  methods
}
</script>

Returning to the App component, remember to execute the necessary mutation along with creating relevant getters to access data residing in the modules.

store.js

export const store = new Vuex.Store({
  state: {
    jobs: []
  },
  getters: {
    jobs: state => state.jobs,
    sumAll (state, getters) {
      let total = 0
      for (let i = 1; i <= state.jobs.length; i++) {
        total += getters[`module${i}/count`]
      }
      return total
    }
  } 
...

To complete the code in the App component:

<script>
import Hello from './components/Hello'
import {mapMutations, mapGetters} from 'vuex'

    export default {
      components: {
        Hello
      },
      computed: {
        ...mapGetters([
          'jobs',
          'sumAll'
        ])
      },
      methods: {
        ...mapMutations([
          'addJob'
        ])
      }
    }
    </script>

Answer 3

Answer №2

Greetings and thank you for sharing your question along with the solution.

Recently, I delved into learning Vuex and encountered a similar issue. After reviewing your solution, I devised mine without the necessity of registering additional modules. I personally view adding new modules as excessive and frankly fail to grasp the rationale behind it. However, there's a chance that I may have misconstrued the problem at hand.

In order to enhance clarity and illustrative purposes, I replicated your markup with a few modifications:

The components included are:

JobList.vue - primary custom component
Job.vue - child custom component within job-list
jobs.js - vuex store module file

Description of JobList.vue (responsible for enclosing the job(s) list items):

<template>
    <div>
        <job v-for="(job, index) in jobs" :data="job" :key="job.id"></job>

        <h3>Create New Job</h3>
        <form @submit.prevent="addJob">
            <input type="text" v-model="newJobName" required>
            <button type="submit">Add Job</button>
        </form>
    </div>
</template>

<script>
    import store from '../store/index'
    import job from './job';

    export default {
        components: { job },
        data() {
            return {
                newJobName: ''
            };
        },
        computed: {
            jobs() {
                return store.state.jobs.jobs;
            }
        },
        methods: {
            addJob() {
                store.dispatch('newJob', this.newJobName);
            }
        }
    }
</script>

Details of Job.vue:

<template>
    <div>
        <h5>Id: {{ data.id }}</h5>
        <h4>{{ data.name }}</h4>
        <p>{{ data.active}}</p>
        <button type="button" @click="toggleJobState">Toggle</button>
        <hr>
    </div>
</template>

<script>

    import store from '../store/index'

    export default {
        props: ['data'],
        methods: {
            toggleJobState() {
                store.dispatch('toggleJobState', this.data.id);
            }
        }
    }

</script>

Lastly, here is the jobs.js file defining the Vuex module:

export default {
    state: {
        jobs: [
            {
                id: 1,
                name: 'light',
                active: false
            },
            {
                id: 2,
                name: 'medium',
                active: false
            },
            {
                id: 3,
                name: 'heavy',
                active: false
            }
        ]
    },

    actions: { //methods
        newJob(context, jobName) {
            context.state.jobs.push({
                id: context.getters.newJobId,
                name: jobName,
                active: false
            });
        },
        toggleJobState(context, id) {
            context.state.jobs.forEach((job) => {
                if(job.id === id) { job.active = !job.active; }
            })
        }
    },

    getters: { //computed properties
        newJobId(state) { return state.jobs.length + 1; }
    }
}

This setup allows for adding new jobs to the store and individually controlling each job using the "active" property, eliminating the requirement for an additional custom Vuex module.

Answer 4

Greetings and thank you for sharing your question along with the solution.

Recently, I delved into learning Vuex and encountered a similar issue. After reviewing your solution, I devised mine without the necessity of registering additional modules. I personally view adding new modules as excessive and frankly fail to grasp the rationale behind it. However, there's a chance that I may have misconstrued the problem at hand.

In order to enhance clarity and illustrative purposes, I replicated your markup with a few modifications:

The components included are:

JobList.vue - primary custom component
Job.vue - child custom component within job-list
jobs.js - vuex store module file

Description of JobList.vue (responsible for enclosing the job(s) list items):

<template>
    <div>
        <job v-for="(job, index) in jobs" :data="job" :key="job.id"></job>

        <h3>Create New Job</h3>
        <form @submit.prevent="addJob">
            <input type="text" v-model="newJobName" required>
            <button type="submit">Add Job</button>
        </form>
    </div>
</template>

<script>
    import store from '../store/index'
    import job from './job';

    export default {
        components: { job },
        data() {
            return {
                newJobName: ''
            };
        },
        computed: {
            jobs() {
                return store.state.jobs.jobs;
            }
        },
        methods: {
            addJob() {
                store.dispatch('newJob', this.newJobName);
            }
        }
    }
</script>

Details of Job.vue:

<template>
    <div>
        <h5>Id: {{ data.id }}</h5>
        <h4>{{ data.name }}</h4>
        <p>{{ data.active}}</p>
        <button type="button" @click="toggleJobState">Toggle</button>
        <hr>
    </div>
</template>

<script>

    import store from '../store/index'

    export default {
        props: ['data'],
        methods: {
            toggleJobState() {
                store.dispatch('toggleJobState', this.data.id);
            }
        }
    }

</script>

Lastly, here is the jobs.js file defining the Vuex module:

export default {
    state: {
        jobs: [
            {
                id: 1,
                name: 'light',
                active: false
            },
            {
                id: 2,
                name: 'medium',
                active: false
            },
            {
                id: 3,
                name: 'heavy',
                active: false
            }
        ]
    },

    actions: { //methods
        newJob(context, jobName) {
            context.state.jobs.push({
                id: context.getters.newJobId,
                name: jobName,
                active: false
            });
        },
        toggleJobState(context, id) {
            context.state.jobs.forEach((job) => {
                if(job.id === id) { job.active = !job.active; }
            })
        }
    },

    getters: { //computed properties
        newJobId(state) { return state.jobs.length + 1; }
    }
}

This setup allows for adding new jobs to the store and individually controlling each job using the "active" property, eliminating the requirement for an additional custom Vuex module.

Creating separate Vuex stores for dynamic components

Answer №1

Answer №2

Similar questions

A straightforward method of transmitting data from JavaScript to the Python back-end within a Streamlit application

Using javascript within a PHP file

ES6 Generators: lack of informative stack trace when using iterator.throw(err)

AngularJS - issue with directive functionality on dynamically inserted classes

How can I show a legend entry for every column in Amcharts?

Access a PHP file using XMLHttpRequest to run additional JavaScript code

Issue with retrieving data from an external provider

One common issue is being unable to target input[type=file] when multiple forms are present on a page using JavaScript

The total number of items in the cart is experiencing an issue with updating

The playwright brings the curtain down on a blank page without a single word

What is the best way to ensure that empty strings are not included in the length of my array?

Error message: When accessing react-native camera roll, the message "this.state.photos is not a valid object" appears

The Express server is failing to deliver a response to the client when using the fetch method

What is the method for iterating through rows using csv-parser in a nodejs environment?

Unlocking the Power of Ajax for Displaying Wordpress Queries

Issue TS7053 occurs when trying to access any index of the target of a React.FormEvent<HTMLFormElement>

I am having trouble grasping certain syntax in JavaScript when it comes to using `${method_name}`

Circular movement in ThreeJS within a specified duration

What is causing the recurring failure of file input changes to take effect?

utilize ajax success method to extract json data