Common knowledge points in Vuex (summary)

If you have used vue.js before, you must know the pain of passing values ​​between components in vue. In vue, we can use vuex to save the state we need to manage. Value, let's take a look at some commonly used knowledge points in vuex, I hope it will be helpful to everyone.

1. Why use Vuex

1. Multiple components rely on the same state, and using communication methods between components will be very cumbersome, such as multi-layer nested components. .

2. Data that needs to be saved globally, such as user, permission information, global system settings

2. Five core attributes of Vuex

1 , state: storage state

// store.jsconst store = new Vuex.Store({
  state: {
    count: 0
  }});// 组件里获取count值$store.state.count

2. getters: state is used as the first parameter, and other getters are used as the second parameter. The return value will be cached according to its dependencies, which is equivalent to Vue’s calculated properties

// store.jsconst store = new Vuex.Store({
  state: {
    count: 1，
    sum: 2
  },
  getters: {
    getCountAndSum： (state,getters) => {
      return state.count + state.sum;
    }
  }});// 其他组件获取getter$store.getters.getCountAndSum

3. Mutations: Modify the state (synchronous), state as the first parameter, submit the payload as the second parameter

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  }});// 其他组件调用mutations的方法$store.commit('increment', {n: 100});

4. Actions: Asynchronous operations (methods for executing mutations, not direct Change status)

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  },
  actions: {
    increment (context) {
      context.commit('increment');
    }
  }});// 其他组件调用actions的方法$store.dispatch('increment');

5. modules: submodule of store

const a = {
  state: {
    count: 0
  },
  getters: {
    getCount2 (state, getters, rootState) {
      return state.count + 2;
    }
  },
  mutations: {
    increment (state, getters, rootState) {
      state.count++;  
    }
  },
  actions: {
    increment (context) {
      // context.state.count;
      // context.rootState.count;
      context.commit('increment');
    }
  }};const b = {};const store = new Vuex.Store({
  modules: {
     a,
     b  }});// 其他组件调用 （获取state的变量需要加上引入的module的别名)$store.state.a$store.state.b

3. Vuex auxiliary function

<template>
  <div class="about">
    <h1 id="count-nbsp-span-count-span">count: <span>{{count}}</span></h1>
    <h1 id="getCount-nbsp-span-store-getters-getCount-span">getCount: <span>{{$store.getters.getCount}}</span></h1>
    <h1 id="sum-nbsp-span-sum-span">sum: <span>{{sum}}</span></h1>
    <h1 id="getSum-nbsp-span-store-getters-getSum-span">getSum: <span>{{$store.getters.getSum}}</span></h1>
    <button @click="clickB">test    </button>
  </div></template><script>import {mapState, mapGetters, mapMutations, mapActions} from &#39;vuex&#39;; 
export default {
  name: &#39;about&#39;,
  data () {
    return {
      count: 0,
      sum: 0
    }
  },
  computed: {
    ...mapState({
      count: state => state.count,
      countAlias: &#39;count&#39;,
      countPlusLocalState (state) {
        return state.count + this.localCount;
      }
    }),
    ...mapGetters([
      &#39;getCount&#39;, &#39;getSum&#39;
    ])
  },
  mounted () {
    this.count = this.$store.state.count;
    this.sum = this.$store.state.a.sum;

  },
  methods:{
    ...mapMutations(
      &#39;add&#39;,&#39;addO&#39;
    ),
    ...mapActions([
      &#39;add&#39;,&#39;addO&#39;
    ]),
    clickB () {
      this.$store.dispatch(&#39;add&#39;);
      this.$store.dispatch(&#39;addO&#39;);
    }
  }
}</script>

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: The latest 5 vue.js video tutorials in 2020 Select

For more programming-related knowledge, please visit:Introduction to Programming! !

The above is the detailed content of Common knowledge points in Vuex (summary). For more information, please follow other related articles on the PHP Chinese website!