Hero is introduced

Weiyou X, a third-generation robot created by Master Lu Ban, is currently in charge of jixia College, responsible for the material distribution of the college. He uses centralized storage to manage all the materials of the college, and ensures that the materials change in a predictable way with corresponding rules.

Name: Vuex

Heat rank: T0

95% odds:

Attendance rate: 90% (100% for medium and large projects)

Ban rate: 0%

Skills:

State (single State tree)

Getter (calculates properties)

例 句 : The Mutation did not change his mind.

Action (asynchronous operation)

Module (Multiplex)

X can split the store into modules through modules. Each module has its own properties such as state;

Out of the pack:

MapState:

count: state => state.count
countAlias: 'count'
Computed: mapState([// map this.count to store.state.count 'count'])

MapMutation:

methods:{ ... mapMutations(['increment', // Map 'this.increment()' to 'this.$store.commit('increment') `]),}Copy the code

MapActions:

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)` ]), ... mapActions({ add:'increment'// Map 'this.add()' to 'this.$store.dispatch('increment') `})}Copy the code

dispatch:

store.dispatch('increment')
Copy the code

Commit:

store.commit('increment')
Copy the code

X’s personal principles:

  • Application-level state should be centralized into a single Store object.

  • Submitting mutation is the only way to change the state, and the process is synchronous.

  • Asynchronous logic should be wrapped in actions.

How X handles forms:

  1. Bind the value, then listen for input, and call the COMMIT method within the listen event to trigger a mutation change to the corresponding state
<! --view--> <input :value="message" @input="updateMessage"> <! --methods--> methods: { updateMessage (e) { this.$store.commit('updateMessage', e.target.value)
  }
}
Copy the code
  1. Use get and SET methods for computed attributes for corresponding processing
<input v-model="message">
Copy the code
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}
Copy the code

This period hero introduction finished, I wish you all an early national service king, we see you next time.