zoukankan      html  css  js  c++  java
  • Vuex学习总结

    4.Vuex核心概念

    4.3 Mutations

    改变Vuex实例中的状态的唯一方法是提交mutation
    Vuex学习总结(2)Vuex入门这里已经演示了如何提交mutation

    在提交mutation时可以带参数。

    // store/index.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        count: 1,
      },
      mutations: {
        incrementBy(state, n) {
          state.count += n
        },
      },
    })
    
    <template>
        <div>
            <button @click="incrementBy">加三</button> {{count}}
        </div>
    </template>
    
    <script>
        import {mapState} from 'vuex'
    
        export default {
            name: "Counter",
            computed: {
                ...mapState(['count']),
            },
            methods: {
                incrementBy() {
                    this.$store.commit('incrementBy', 3)
                }
            }
        }
    </script>
    

    提交mutation时的参数可以是一个对象。

    // store/index.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        count: 1,
      },
      mutations: {
        incrementBy(state, payload) {
            state.count += payload.amount
        },
      },
    })
    
    <template>
        <div>
            <button @click="incrementBy">加三</button> {{count}}
        </div>
    </template>
    
    <script>
        import {mapState} from 'vuex'
    
        export default {
            name: "Counter",
            computed: {
                ...mapState(['count']),
            },
            methods: {
                incrementBy() {
                    this.$store.commit('incrementBy', {amount: 3})
                }
            }
        }
    </script>
    

    提交mutation还可以像下面这样。

    this.$store.commit({type: 'incrementBy', amount: 10})
    

    使用mapMutations

    <template>
        <div>
            <button @click="increment">加一</button> {{count}}      
        </div>
    </template>
    
    <script>
        import {mapState, mapMutations} from 'vuex'
    
        export default {
            name: "Counter",
            computed: {
                ...mapState(['count']),
            },
            methods: mapMutations(['increment'])
        }
    </script>
    

    往Vuex实例的state属性添加数据。

    // store/index.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
        people: {
            name: '张三',
        },
      },
    })
    
    <template>
      <div class="home">
        {{this.$store.state.people}} <button @click="addAge">添加年龄</button>
      </div>
    </template>
    
    <script>
    export default {
      name: 'Home',
      methods: {
        addAge() {
          this.$store.state.people = {...this.$store.state.people, age: 20}
        },
      },
    }
    </script>
    

    将本地方法与mapMutations合并的方法。

    <template>
        <div>
            <button @click="increment">加一</button> {{count}}
            <button @click="add">加一</button> {{count}}
        </div>
    </template>
    
    <script>
        import {mapState, mapMutations} from 'vuex'
    
        export default {
            name: "Counter",
            computed: {
                ...mapState(['count']),
            },
            methods: {
                ...mapMutations(['increment']),
                ...mapMutations({
                    add: 'increment'
                })
            }
        }
    </script>
    

    在Vuex中,mutations是同步事务,因为当两个异步回调同时改变一个状态时,不知道那个异步回调先执行完,这样就无法跟踪状态的变化。就像在JavaScript中,先后写两个Ajax,你不知道哪个Ajax先执行完。
    参考:

  • 相关阅读:
    HDU2059(龟兔赛跑)
    pat 1012 The Best Rank
    pat 1010 Radix
    pat 1007 Maximum Subsequence Sum
    pat 1005 Sign In and Sign Out
    pat 1005 Spell It Right
    pat 1004 Counting Leaves
    1003 Emergency
    第7章 输入/输出系统
    第六章 总线
  • 原文地址:https://www.cnblogs.com/gzhjj/p/14349020.html
Copyright © 2011-2022 走看看