五分钟搞懂Vuex实用知识(小结)

五分钟搞懂Vuex实用知识(小结)攻略

1.简介

Vuex是Vue.js应用程序开发的首选架构，它是一个状态管理库，将状态集中管理。Vuex主要解决了Vue.js的组件通信和数据共享的问题。

2.核心概念

Vuex的核心概念包括：

• State：状态，即应用程序中的数据。
• Getters：获取状态，用于获取State中的值并进行处理后输出。
• Mutations：更改状态，用于直接更改State的值。
• Actions：业务逻辑的封装，用于触发Mutations更改State的值。
• Modules：模块化，将State、Getters、Mutations、Actions按模块拆分。

3.示例说明

3.1 简单示例：计数器

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    getCount: state => state.count
  }
})

export default store

上述代码定义了一个简单的计数器，使用Vuex管理状态。State包含计数器的初始值0，Getters用于获取计数器的值，Mutations用于直接更改State的值，Actions用于异步触发Mutations的更新操作。

// Counter.vue
<template>
  <div>
    <div>count: {{ count }}</div>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementAsync">+ Async</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from 'vuex'

export default {
  computed: {
    ...mapGetters(['getCount']),
    count() {
      return this.getCount
    }
  },
  methods: {
    ...mapMutations(['increment', 'decrement']),
    ...mapActions(['incrementAsync'])
  }
}
</script>

上述代码定义了一个计数器组件，使用Vuex管理状态。组件通过mapMutations、mapActions、mapGetters等辅助函数将Vuex的Getters、Mutations、Actions映射到组件的计算属性和方法中，从而实现了对Vuex的便捷使用。

3.2 示例：购物车

下面我们用购物车的例子来更深入的学习Vuex。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, item) {
      const existItem = state.cart.find(cartItem => cartItem.id === item.id)
      if (existItem) {
        existItem.quantity++
      } else {
        state.cart.push({
          ...item,
          quantity: 1
        })
      }
    },
    removeFromCart(state, item) {
      const index = state.cart.indexOf(item)
      state.cart.splice(index, 1)
    }
  },
  getters: {
    getCart: state => state.cart,
    getTotalPrice: state => {
      let price = 0
      state.cart.forEach(item => {
        price += item.price * item.quantity
      })
      return price
    }
  }
})

export default store

上述代码定义了一个购物车的示例，使用Vuex管理状态。State包含了一个购物车数组，包含多个商品项(例子这里只定义了两个item)，每个商品包括id，name，img，price和quantity(表示数量)等属性。Getters用于获取购物车信息和计算购物车总价，Mutations用于更改State的值。

// Cart.vue
<template>
  <div>
    <h2>Cart</h2>
    <div v-for="item in cart" :key="item.id">
      <img :src="item.img" width="100">
      <div>
        <p>{{ item.name }}</p>
        <p>{{ item.price }}</p>
        <p>Quantity: {{ item.quantity }}</p>
        <button @click="removeFromCart(item)">remove</button>
      </div>
    </div>
    <div>Total: {{ totalPrice }}</div>
  </div>
</template>

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

export default {
  computed: {
    ...mapGetters(['getCart', 'getTotalPrice']),
    cart() {
      return this.getCart
    },
    totalPrice() {
      return this.getTotalPrice
    }
  },
  methods: {
    ...mapActions(['addToCart', 'removeFromCart'])
  },
  created() {
    this.addToCart({
      id: 1,
      name: 'Macbook Pro',
      img: 'https://source.unsplash.com/Nl43QfASCZY/200x150',
      price: 10000
    })
    this.addToCart({
      id: 2,
      name: 'iPhone 12',
      img: 'https://source.unsplash.com/RJtyO__-t1I/200x150',
      price: 5999
    })
  }
}
</script>

上述代码定义了一个购物车组件，使用Vuex管理状态。组件通过mapGetters、mapActions等辅助函数将Vuex的Getters和Actions映射到组件的计算属性和方法中，从而实现了对Vuex的便捷使用。组件在created的钩子函数中使用两个Action将商品加入购物车。

以上两个示例展示了如何在Vue.js应用中使用Vuex，通过理解其中的核心概念，我们可以将Vuex运用到更加复杂的应用中。