Use of vuex and map method

Vuex

• Concept: a Vue plug-in that implements centralized state (data) management in Vue. It centrally manages (reads / writes) the shared state of multiple components in Vue applications. It is also a way of communication between components, and is applicable to the communication between any components

• Usage scenario: multiple components need to share data

• Build vuex environment

  • Create file: Src / store / index js

    //This file is used to create the most core store in vuex
    //Introduce vuex
    import Vue from 'vue'
    //Introduce vuex插件
    import Vuex from "vuex"
    Vue.use(Vuex)
    //Prepare actions -- actions used to respond to components
    const actions = {}
    //Prepare mutations -- for manipulating data (state)
    const mutations = {}
    //Prepare state -- for storing data
    const state = {}
    
    const store = new Vuex.Store({
      actions,
      mutations,
      state,
    })
    
    export default store;

  • In main When creating VM in JS, pass in the store configuration item

    //Import the created store
    import store from "./store"
    
    new Vue({
      el: '#app',
      render: h=>h(App),
      //Using store
      store,
      ...
    })

• Specific use

  • Component use

    methods: {
      add() {
        this.$store.dispatch("add", params);
      },
      ...
    }

  • src/store/index. JS configuration

    //Prepare actions -- actions used to respond to components
    const actions = {
      add(context, value) {
        context.commiit("ADD", value);
      },
      ...
    }
    //Prepare mutations -- for manipulating data (state)
    const mutations = {
      ADD(state, value) {
        state.sum += value;
      },
      ...
    }
    //Prepare state -- for storing data
    const state = {
      sum: 0,
      ...
    }

Use of Getters

• Concept: when the data in state needs to be processed before use, you can use getters processing

• In store / index Add getters configuration in JS

  ...
  //Prepare getters -- used to process the data in state
  const getters = {
    change(state){
      return state.sum*10
    },
  }
  
  const store = new Vuex.Store({
    ...
    getters,
  })

• Read data from component

  $store.getters.change

Use of four map methods in component

• Mapstate method: it is used to help us map the data in state into calculated attributes

  computed: {
    //Generate the above calculation attributes through mapstate and read data from state (object mode)
    ...mapState({sum2:'sum'}),
    //Generate the above calculation attributes through mapstate and read data from state (array method). The name of the calculation attribute shall be consistent with that read in state
    ...mapState(['sum']),
  }

• Mapgetters method: used to help us map the data in getters into custom methods

  methods: {
    //Generate the above custom methods through mapgetters and read data from getters (object mode)
    ...mapGetters({change:'change'}),
    //Generate the above custom methods through mapgetters and read data from getters (array method). The names of the custom methods and the methods read in getters are required to be consistent
    ...mapGetters([change]),
  }

• Mapactions method: the method used to help us generate a dialogue with actions, that is, $store Function of dispatch (xxx)

  methods: {
    //Generate incrementadd and incrementwait (object mode) through maactions: if parameters need to be passed, the following methods can be used to pass parameters when clicking call
    ...mapActions({incrementOdd: 'addOdd', incrementWait: 'addWait'}),
    //Generate incrementadd and incrementwait (array method) through mapactions: if parameters need to be passed, the following methods can be used to pass parameters when clicking call,
    //It is required that the name of the calculation attribute is consistent with the name of the actions method
    // ...mapActions(['addOdd', 'addWait']),
  }

• Mapmutations method: a method used to help us generate a conversation with mutations, that is, $store Function of commit (xxx)

  methods: {
    //Generate increment and decrement through mapmutations (object mode): if parameters need to be passed, the following methods can be used to pass parameters when clicking call
    ...mapMutations({increment: 'ADD', decrement: 'SUB'}),
    //Generate increment and decrement through mapmutations (array method): if parameters need to be passed, the following methods can be used to pass parameters when clicking call,
    //It is required that the name of the calculation property is consistent with the name of the changes method
    // ...mapMutations(['ADD', 'SUB']),
  }

Modularity + namespace

• Purpose: to better maintain the code and make the classification of multiple data more clear.

• Modify store js

  const CountOptions {
    //If the namespace is true, the component can use this configuration
    namespaced: true,
    actions: {...},
    mutations: {...},
    state: {...},
    getters: {...},
  }
  const PersonOptions {
    //If the namespace is true, the component can use this configuration
    namespaced: true,
    actions: {...},
    mutations: {...},
    state: {...},
    getters: {...},
  }
  const store = new Vuex.Store({
    modules: {
      //Modular programming, introducing module configuration (component configuration)
      CountAbout: CountOptions,
      PersonAbout: PersonOptions,
    }
  })

• After the namespace is opened, read the state data from the component:

  //Method 1: read directly by yourself
  this.$store.state.PersonAbout.xxx;
  //Method 2: read with mapstate
  ...mapState('CountAbout',{sum:'sum', sum2:'sum'});

• After the namespace is opened, the getters data is read from the component:

  //Method 1: read directly by yourself
  this.$store.getters['PersonAbout/xxx'];
  //Method 2: read with mapgetters
  ...mapGetters('CountAbout',{xxx:'xxx'});

• After the namespace is opened, dispatch is called in the component:

  //Method 1: call dispatch directly
  this.$store.dispatch('CountAbout/xxx', params);
  //Method 2: read with mapactions
  ...mapActions('CountAbout',{xxx:'xxx'});

• After the namespace is opened, call commit in the component:

  //Method 1: directly call commit yourself
  this.$store.commit('CountAbout/xxx', params);
  //Method 2: read with mapmutations
  ...mapMutations('CountAbout',{xxx:'xxx'});