Mapping data using MapState is a useful technique that can help organize and access data

Question

Mapping data using MapState is a useful technique that can help organize and access data

Is it possible to use ...mapstate to fetch data from the store instead of directly accessing it like

this.$store.state.workermanage.staff.staff

? Any suggestions are appreciated, thank you.

persons: this.$store.state.workermanage.staff.staff

javascript typescript vue.js vuex nuxt.js

Answer 1

Answer №1

computed: {
  ...mapState({ individuals: state => state.workermanage.staff.staff })
}

To implement:

{{ members }}

Answer 2

computed: {
  ...mapState({ individuals: state => state.workermanage.staff.staff })
}

To implement:

{{ members }}

Answer 3

Answer №2

Implement a getter to access the nested staff object in your store.js file

const store = new Vuex.Store({
  state: {
    workmanage: {
        staff: {
            staff: {

            } 
        }
    }
  },
  getters: {
    nestedStaff: state => {
      return state.workamage.staff.staff
    }
  }
})

Integrate the getter into your component:

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'nestedStaff'
    ])
  }
}

Once done, you can utilize nestedStaff as if it were a regular computed property.

Answer 4

Implement a getter to access the nested staff object in your store.js file

const store = new Vuex.Store({
  state: {
    workmanage: {
        staff: {
            staff: {

            } 
        }
    }
  },
  getters: {
    nestedStaff: state => {
      return state.workamage.staff.staff
    }
  }
})

Integrate the getter into your component:

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'nestedStaff'
    ])
  }
}

Once done, you can utilize nestedStaff as if it were a regular computed property.

Mapping data using MapState is a useful technique that can help organize and access data

Answer №1

Answer №2

Similar questions

sending data between pages in a Next.js application

Using Typescript to iterate through an array of objects and modifying their keys using the forEach method

Discover the indices of elements that, when their values are added together, equal x

Step-by-step guide to swapping an element with a textarea element using javascript

Angular project icons not displaying in the browser

Encountering an error with MaterialUI (MUI) after setting up webpack server, as getUtilityClass function is not recognized

Troubleshooting a deletion request in Angular Http that is returning undefined within the MEAN stack

Accessing props in react-native-testing-library and styled-components is not possible

How can I extract the value of the first element in a dropdown using Javascript?

Does d exclusively match digits from 0 to 9?

Developing a loader feature in React

What is preventing this composable from being reactive?

Using .addEventListener() within a function does not successfully generate the intended event listener

The performance of CasperJS when used with AngularJS is subpar

The fetch() function is inundating my API with an overwhelming amount of requests

What is preventing my div from occupying the entire window space?

Using AJAX and FormData to Attach a List upon Submission

Issue with the select element in Material UI v1

Convert the entirety of this function into jQuery

The Journey of React Components: How Child Components Embrace the State Props of the Past