Vuex模块化和命名空间namespaced实例演示

下面是关于Vuex模块化和命名空间namespaced实例演示的详细讲解：

什么是Vuex模块化？

在一个大型的Vue项目中，为了更好地管理应用状态，我们需要把Vuex中的各个部分拆分成多个模块。这样做的好处是让各个部分相对独立，以便更好地维护和扩展。

模块化让我们可以使用Vuex.Store构造函数中的modules属性来构建多个子模块。每个子模块都拥有自己的状态、getters、mutations、actions等内容。

什么是命名空间namespaced？

当我们有多个模块时，为了避免它们之间的命名冲突，我们可以给一个模块添加一个命名空间。这样，我们在调用这个模块的属性或方法时，需要在调用的时候标记这个模块的命名空间。

在Vuex中，我们可以通过在模块中添加namespaced: true来启用命名空间。

模块化和命名空间实例演示

下面是一个演示代码示例：

// store/modules/cart.js
export default {
  namespaced: true,
  state: {
    cartGoods: []
  },
  getters: {
    totalPrice(state) {
      return state.cartGoods.reduce((total, good) => {
        return total + good.price * good.quantity
      }, 0)
    }
  },
  mutations: {
    addCartGood(state, good) {
      const exist = state.cartGoods.find(item => item.id === good.id)
      if (exist) {
        exist.quantity++
      } else {
        state.cartGoods.push({
          ...good,
          quantity: 1
        })
      }
    }
  },
  actions: {
    addToCart({ commit }, good) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          commit('addCartGood', good)
          resolve()
        }, 1000)
      })
    }
  }
}

在这个示例中，我们创建了一个名为cart的模块，添加了命名空间并分别定义了state、getters、mutations和actions等属性。在cart模块中，我们可以使用state.cartGoods存储购物车中的所有商品，并计算购物车中所有商品的总价钱。我们还定义了一个addCartGood的mutation用于在购物车中添加商品。在actions中，我们通过使用ES6的promise来封装异步行为，在1秒后将商品添加到购物车中。

下面是如何在组件中使用这个cart模块：

// components/Good.vue
<template>
  <div class="good-card">
    <h3>{{ good.name }}</h3>
    <p>Price: {{ good.price }}</p>
    <button @click="addToCart">Add to Cart</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  name: 'Good',
  props: {
    good: {
      type: Object,
      default: () => ({})
    }
  },
  methods: {
    ...mapActions('cart', ['addToCart'])
  }
}
</script>

在这个示例中，我们使用了mapActions辅助函数将cart模块中的addToCart action映射到了组件的方法中。

// views/Cart.vue
<template>
  <div>
    <h2>Shopping Cart</h2>
    <div class="cart-list">
      <ul>
        <li v-for="(good, index) in cartGoods" :key="index">
          <span>{{ good.name }}</span>
          <span>Price: {{ good.price }}</span>
          <span>Quantity: {{ good.quantity }}</span>
        </li>
      </ul>
      <p>Total Price: {{ totalPrice }}</p>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'Cart',
  computed: {
    ...mapState('cart', ['cartGoods']),
    ...mapGetters('cart', ['totalPrice'])
  }
}
</script>

在这个示例中，我们使用了mapState和mapGetters辅助函数将cart模块中的cartGoods和totalPrice映射到了组件的计算属性中。这样，在组件中就可以轻松地使用vuex中的状态和方法了。

综上所述，通过上面的模块化和命名空间示例，可以让Vuex管理大型项目中的状态更加清晰明了。