状态管理Vuex 之 Mutation

状态管理Vuex 之 Mutation

Mutation 概念介绍

• Vuex 中 store 数据改变的唯一方法就是 mutation 。
• mutations 里面装着改变数据的方法集合，处理数据逻辑的方法全部都会放在 mutations 里，使数据和视图分离。

Mutation 代码构建

• muation 非常类似于事件：每个 mutation 都有一个字符串的事件类型（type）和一个回调函数（handler）。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

  /* 文件路径：store/index.js */
  import Vue from 'vue'
  import Vuex from 'vuex'
  
  Vue.use(Vuex)
  
  const store = new Vuex.Store({
      state: {
          count: 1
      },
      mutations: {
          add(state) {
              // 变更状态
              state.count += 2
          }
      }
  })
  
  export default store
  

  注意：不能直接调用一个 mutation hanlder。 这个选项更像是事件注册：

  • 当触发一个类型为 add 的 mutation 时，调用此函数。
  • 要唤醒一个 mutation handler 你需要以相应的 type 调用 store.commit 方法。

Mutation 调用 && 提交

• store.commit 调用 mutation （需要在根节点注入 store）

  <!-- 页面路径：pages/index/index.vue -->
  <template>
      <view>数量：{{count}}</view>
      <button @click="addCount">增加</button>
  </template>
  <script>
      import store from '@/store/index.js'
      export default {
          computed: {
              count() {
                  return this.$store.state.count
              },
          }
          methods: {
              addCount() {
                  store.commit('add')
              }
          }    
      }
  </script>
  

• 传入参数

  向 store.commit 传入额外的参数，即 mutation 的荷载（payload）：

  • 可以传递一个参数

    /* 文件路径：store/index.js */
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        state: {
            count: 1
        },
        mutations: {
            add(state, n) {
                // 变更状态
                state.count += n
            }
        }
    })
    
    export default store
    

    <!-- 页面路径：pages/index/index.vue -->
    <template>
        <view>数量：{{count}}</view>
        <button @click="addCount">增加</button>
    </template>
    <script>
        import store from '@/store/index.js'
        export default {
            computed: {
                count() {
                    return this.$store.state.count
                },
            }
            methods: {
                addCount() {
                    store.commit('add', 5) // 每次累加5
                }
            }    
        }
    </script>
    

  • 可以传递一个对象

    /* 文件路径：store/index.js */
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        state: {
            count: 1
        },
        mutations: {
            add(state, payload) {
                // 变更状态
                state.count += payload.amount
            }
        }
    })
    
    export default store
    

    <!-- 页面路径：pages/index/index.vue -->
    <template>
        <view>数量：{{count}}</view>
        <button @click="addCount">增加</button>
    </template>
    <script>
        import store from '@/store/index.js'
        export default {
            computed: {
                count() {
                    return this.$store.state.count
                },
            }
            methods: {
                addCount() {
                    store.commit('add', {aount: 10}) // 每次累加10, 把荷载和type分开提交
                }
            }    
        }
    </script>
    

• 提交方式

  • 对象风格的提交方式，handler 保持不变

    <!-- 页面路径：pages/index/index.vue -->
    <template>
        <view>数量：{{count}}</view>
        <button @click="addCount">增加</button>
    </template>
    <script>
        import store from '@/store/index.js'
        export default {
            computed: {
                count() {
                    return this.$store.state.count
                },
            }
            methods: {
                addCount() {
                    // 整个对象都作为荷载传给 mutation 函数
                    store.commit({
                        type：'add',
                        aount: 10
                    }) 
                }
            }    
        }
    </script>
    

  • 通过 mapMutations 辅助函数提交

    使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

    <!-- 页面路径：pages/index/index.vue -->
    <template>
        <view>数量：{{count}}</view>
        <button @click="add">增加</button>
    </template>
    <script>
        import mapMutations from 'vuex' //引入 mapMutations
        export default {
            computed: {
                count() {
                    return this.$store.state.count
                },
            }
            methods: {
                ...mapMutations(['add']) //对象展开运算符直接拿到add
            }    
        }
    </script>
    

    /* 文件路径：store/index.js */
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
        state: {
            count: 1
        },
        mutations: {
            add(state) {
                // 变更状态
                state.count += 2
            }
        }
    })
    
    export default store
    

规则与约定

• 最好提前在 store 中初始化好所有所需属性。
• mutation 必须是同步函数。