举一个vue中应用vuex的例子

假设我们有一个应用程序，其中有一个购物车组件和一个商品列表组件。我们可以使用 Vuex 来管理购物车中的商品数量，并确保在不同的组件之间共享状态。

首先，我们需要在 Vuex 中定义一个 store 对象。在这个例子中，我们需要跟踪购物车中每个商品的数量。我们可以在 store 中定义一个 state 对象来存储这些信息：

const store = new Vuex.Store({
  state: {
    cartItems: []
  },
  mutations: {
    addCartItem(state, item) {
      state.cartItems.push(item)
    }
  },
  actions: {
    addToCart(context, item) {
      context.commit('addCartItem', item)
    }
  }
})

在这个例子中，我们定义了一个数组 cartItems 来存储购物车中的商品。我们还定义了一个 mutation，addCartItem，它将一个商品添加到购物车中。最后，我们定义了一个 action，addToCart，它会触发 addCartItem mutation。

现在我们可以在我们的组件中使用 Vuex 来管理购物车状态了。我们可以使用 mapActions 辅助函数来将 addToCart action 映射到组件中，然后在组件中使用它来添加商品到购物车中：

<template>
  <div>
    <h2>Product List</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - {{ product.price }}
        <button @click="addToCart(product)">Add to Cart</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1', price: 10 },
        { id: 2, name: 'Product 2', price: 20 },
        { id: 3, name: 'Product 3', price: 30 }
      ]
    }
  },
  methods: {
    ...mapActions(['addToCart'])
  }
}
</script>

我们还需要在购物车组件中使用 mapState 辅助函数来将 cartItems 映射到组件中，然后在组件中使用它来显示购物车中的商品数量：

<template>
  <div>
    <h2>Shopping Cart</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - {{ item.quantity }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['cartItems'])
  }
}
</script>

现在我们已经成功地使用 Vuex 来管理应用程序中的状态了。无论在哪个组件中触发 addToCart action，我们都可以在购物车组件中看到购物车中的商品数量更新。