Don’t know how vuex is used in Vue? Click on the link below: simple demo details

  • Demo Github address :github.com/babybrother…

Review how VUEX works

Graph LR A[client] -- event call dispatch --> B((Action)) C(State) -- State modify render --> A B -- commit A type --> D{Mutation} D -- matches the type operation state --> CCopy the code

Vuex five core elements: 1.State 2.Getters 3.Mutations 4. Vuex provides us with an auxiliary function: mapState , mapMutations , mapActions , mapGetters

call methods Auxiliary function
state this.$store.state. xxx mapState
getters this.$store.getters. xxx mapGetters
mutations This $store. Cmmit ((XXX) mapMutations
actions This $store. Dispatch (XXX) mapActions

Note that mapState and mapGetter can only be used in computed attributes, and mapMutations and mapActions can only be called in methods, otherwise an error will be reported

How do I actually use helper functions?

<script> import { mapState , mapMutations , mapActions , mapGetters } from 'vuex'; export default { data(){ return{ } }, computed:{ ... // count (){// return this.$store.state.count,... mapGetters({ getternum:'doneTodos' }), // getternum(){// return this.$store.getters.donetodos //}}, methods:{... mapMutations({ addnum:'addNum' }), addnum1(){ this.addnum() }, The / / / / mapMutations is equivalent to the following addnum1 () {/ / this.$store.com MIT (' addNum) / /},... mapActions({ actionnum:'actionNumAdd' }), actionnum6(){ this.actionnum() }, Actionnum6 (){// this.$store.dispatch('actionNumAdd') //}}} </script>Copy the code

Summary of vuEX mapState, mapMutations, mapActions, mapGetters auxiliary functions look at the above examples are actually similar, When we need to call a lot of values in state and trigger multiple actions in a project scenario, we have to write a lot of repetitive code. At this time, the role of auxiliary functions is shown. In fact, it is a syntactic candy of VuEX, which makes the code more concise and elegant. In-depth study of vuEX state management split and modular processing

  • Blog link: blog.csdn.net/weixin_4364…

  • Nuggets link: juejin.cn/post/684490…

  • Demo Github address :github.com/babybrother…