Home > Web Front-end > Vue.js > Common knowledge points in Vuex (summary)

Common knowledge points in Vuex (summary)

青灯夜游
Release: 2020-10-07 14:11:35
forward
1786 people have browsed it

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

1

2

3

4

// store.jsconst store = new Vuex.Store({

  state: {

    count: 0

  }});// 组件里获取count值$store.state.count

Copy after login

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

1

2

3

4

5

6

7

8

9

10

// store.jsconst store = new Vuex.Store({

  state: {

    count: 1,

    sum: 2

  },

  getters: {

    getCountAndSum: (state,getters) => {

      return state.count + state.sum;

    }

  }});// 其他组件获取getter$store.getters.getCountAndSum

Copy after login

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

1

2

3

4

5

6

7

8

9

const store = new Vuex.Store({

  state: {

    count: 1

  },

  mutations: {

    increment (state, obj) {

      state.count += obj.n;

    }

  }});// 其他组件调用mutations的方法$store.commit('increment', {n: 100});

Copy after login

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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');

Copy after login

5. modules: submodule of store

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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

Copy after login

3. Vuex auxiliary function

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<template>

  <div class="about">

    <h1>count: <span>{{count}}</span></h1>

    <h1>getCount: <span>{{$store.getters.getCount}}</span></h1>

    <h1>sum: <span>{{sum}}</span></h1>

    <h1>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>

Copy after login

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!

Related labels:
source:jianshu.com
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template