Rename Vue mapState state-CodePudding

In my computed, I have two "loading" states that I want to track. Is there a way to add an alias to the other state with this syntax?

  computed: {
    ...mapState('barcodes', ['barcodes', 'loading', 'pagination']),
    ...mapState('users', ['user', 'loading']), // add an alias for this "loading"
  }

CodePudding user response：

mapState has supported an object way, something like: (Specific alias for only 1 field)

computed: {
  ...mapState('barcodes', {
    barcodesLoading: state => state.loading,
  })
}

Or by namespace: (If you want to wrap all user state into the userData namespace)

computed: {
  ...mapState({
      barcodeData: 'barcodes',
      userData: 'users'
  })
}

on Template:

<div>{{barcodeData.loading}}</div>

There is another thread for your reference:

vuex namespaced mapState with multiple modules

CodePudding user response：

I'm not absolutely sure, because I can't check it out right now. But AFAIK you should just try this:

computed: {
    ...mapState('barcodes', {barcodes:'barcodes', alias1:'loading', pagination:'pagination'}),
    ...mapState('users', {user:'user', alias2:'loading'}), // add an alias for this "loading"
  }

I.e. use object instead of array.