This is the 10th day of my participation in Gwen Challenge

mapState

import { mapState } from 'vuex'

export default {
  // ...
  computed: {... mapState({// Arrow functions make code more concise
         count: state= > state.count,
         // Pass the string argument 'count' equal to 'state => state.count'
         countAlias: 'count'.// In order to be able to use 'this' to get local state, you must use regular functions
         countPlusLocalState (state) {
             return state.count + this.localCount
         }
  	})
  }
}
Copy the code

You can pass in an array with the same property name as in state

/ / define the state
const state={
    count:1,}// Use helper functions in the component
computed: {... mapState(['count'])}Copy the code

mapGetters

computed:{ ... mapGetters({/ / the ` enclosing doneCount ` mapping for ` enclosing $store. Getters. DoneTodosCount `
      doneCount: 'doneTodosCount'})}Copy the code

When the property name is the same as defined in getters, you can pass in an array

computed:{
  computed: {
  // Mix getters into a computed object using the object expansion operator. mapGetters(['doneTodosCount'.'anotherGetter'.// ...])}}Copy the code
  • Conclusion:
    • Both mapState and mapGetters use computed mapping
    • After mapping is complete in the component, passThis. name of the mapping propertyTo use

mapMutations

methods:{ ... mapMutations({add: 'increment' // Map 'this.add()' to 'this.store.mit ('increment')'})}Copy the code

When the attribute name is the same as defined in mapMutatios, you can pass in an array

methods:{ ... mapMutations(['increment'.// Map 'this.increment()' to 'this.store.com MIT ('increment')'

        // 'mapMutations' also supports payloads:
        'incrementBy' // Map 'this.incrementBy(amount)' to 'this. codestore.com MIT ('incrementBy', amount)']),}Copy the code

mapActios

mathods:{ ... mapActions({add: 'increment' // Map 'this.add()' to 'this.$store.dispatch('increment')'})}Copy the code

When the property name is the same as defined in mapActios, you can pass in an array

methods:{ ... mapActions(['increment'.// Map 'this.increment()' to 'this.$store.dispatch('increment')'
        // 'mapActions' also supports payloads:
        'incrementBy' // Map 'this.incrementBy(amount)' to 'this.$store.dispatch('incrementBy', amount)']),}Copy the code
  • conclusion
    • Both mapMutations and mapActios are mapped in methods
    • The mapping becomes a method

Multiple modules

  • When I’m not using an auxiliary function,
this.$store.commit('app/addCount')
Copy the code
  • Use an auxiliary function whose first argument is given the path to the namespace
computed: { ... mapState('some/nested/module', {
    a: state= > state.a,
    b: state= > state.b
  })
},
methods: {
  ...mapActions('some/nested/module'['foo'.// -> this.foo()
    'bar' // -> this.bar()])}Copy the code

Or use the createNamespacedHelpers function to create a namespace-based helper function

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module') // Set the path
// Use the same method as before
export default {
  computed: {
    // Search in 'some/nested/module'. mapState({a: state= > state.a,
      b: state= > state.b
    })
  },
  methods: {
    // Search in 'some/nested/module'. mapActions(['foo'.'bar'])}}Copy the code