详解vuex commit保存数据技巧

下面是详解vuex commit保存数据技巧的完整攻略。

简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以预测的方式的改变应用状态。vuex 提供了 commit 方法用来操作 vuex 的 state 对象中的数据。

commit 方法

commit方法是vuex中的一个核心方法，它用来提交一个mutation，即可以改变state中的数据。commit接收一个包含type属性的对象作为参数，type属性表示需要更改的mutation方法的名称，这个对象还可以包含其他需要传递的参数。

下面是一个简单的示例：

<template>
  <div>
    <p>当前商品数量：{{ count }}</p>
    <button @click="addToCart">添加到购物车</button>
  </div>
</template>

<script>
  export default {
    computed: {
      count() {
        return this.$store.state.cart.count
      }
    },
    methods: {
      addToCart() {
        this.$store.commit('addToCart', {id: 1, name: 'apple'})
      }
    }
  }
</script>

在这个示例中，我们的模板中包含了一个按钮，点击按钮后调用了 addToCart 方法，在这个方法中，我们调用了 commit 方法，将一个名为 addToCart 的 mutation 方法提交到 Vuex 中。

在Vuex中，需要定义 addToCart mutation 方法：

const store = new Vuex.Store({
  state: {
    cart: {
      count: 0,
      items: []
    }
  },
  mutations: {
    addToCart(state, product) {
      state.cart.count++
      state.cart.items.push(product)
    }
  }
})

在 addToCart 方法中，我们可以操作state对象中的数据，这里我们改变了商品数量和添加了一个商品。

封装常用commit方法

在实际开发中，我们经常需要执行一些重复性的操作，这时可以把这些操作封装成一个常用的方法，方便在其他地方复用。

下面是一个示例：

const store = new Vuex.Store({
  state: {
    cart: {
      count: 0,
      items: []
    }
  },
  mutations: {
    increment(state) {
      state.cart.count++
    },
    addItem(state, product) {
      state.cart.items.push(product)
    }
  },
  actions: {
    addToCart({ commit }, product) {
      commit('increment')
      commit('addItem', product)
    }
  }
})

在这个示例中，我们将 addToCart 方法改为了一个 actions 方法，并在其中分别调用了 increment 和 addItem 方法。这样可以将常用的操作封装成一个方法，方便在其他地方调用。