Vuex 快速入门(简单易懂)

前言

Vuex是Vue.js的一个状态管理工具，可以方便地处理组件之间的数据共享问题。本文将介绍Vuex的基本概念和使用方法。

Vuex的基本概念

Vuex包含了五个基本概念：

• State：存储数据的地方，可以在组件中直接访问，但是不能直接修改
• Getter：相当于State的计算属性，可以根据State计算出新的值，并缓存起来
• Mutation：修改State的唯一途径，必须是同步的操作
• Action：异步操作State的方式，可以通过Action调用多个Mutation
• Module：将Store分割成多个模块，方便管理和使用

Vuex的使用方法

安装和引入

npm install vuex --save

在main.js中引入Vuex，并创建一个全局的Store：

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--
    }
  },
  getters: {
    doubleCount: state => state.count * 2
  },
  actions: {
    incrementAsync ({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  }
})

new Vue({
  el: '#app',
  store, // 将store注入到Vue实例中
  template: '<App/>',
  components: { App }
})

访问和修改State

computed: {
  count () {
    return this.$store.state.count
  },
  doubleCount () {
    return this.$store.getters.doubleCount
  }
}

methods: {
  increment () {
    this.$store.commit('increment')
  },
  decrement () {
    this.$store.commit('decrement')
  },
  incrementAsync () {
    this.$store.dispatch('incrementAsync')
  }
}

在组件中使用Getter和Action

computed: {
  doubleCount () {
    return this.$store.getters.doubleCount
  }
},
methods: {
  incrementAsync () {
    this.$store.dispatch('incrementAsync')
  }
}

在组件中使用MapState、MapGetter、MapMutation和MapAction

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

computed: {
  ...mapState({
    count: state => state.count
  }),
  ...mapGetters([
    'doubleCount'
  ])
},
methods: {
  ...mapMutations([
    'increment',
    'decrement'
  ]),
  ...mapActions([
    'incrementAsync'
  ])
}

Vuex的示例

示例1：计数器

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">+1</button>
    <button @click="decrement">-1</button>
    <button @click="incrementAsync">+1 Async</button>
  </div>
</template>

<script>
export default {
  computed: {
    ...mapState({
      count: state => state.count
    }),
    ...mapGetters([
      'doubleCount'
    ])
  },
  methods: {
    ...mapMutations([
      'increment',
      'decrement'
    ]),
    ...mapActions([
      'incrementAsync'
    ])
  }
}
</script>

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

示例2：购物车

<template>
  <div>
    <div>
      <div v-for="(product, index) in products" :key="product.id">
        <p>{{ product.name }} - {{ product.price }}</p>
        <button @click="addToCart(index)">Add to Cart</button>
      </div>
    </div>
    <div>
      <h1>Cart</h1>
      <div v-for="(product, index) in cart" :key="index">
        <p>{{ product.name }} - {{ product.price }}</p>
        <button @click="removeFromCart(index)">Remove from Cart</button>
      </div>
      <p>Total: {{ cartTotal }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      products: [
        { id: 1, name: 'Product A', price: 100 },
        { id: 2, name: 'Product B', price: 200 },
        { id: 3, name: 'Product C', price: 300 }
      ]
    }
  },
  computed: {
    cart () {
      return this.$store.state.cart
    },
    cartTotal () {
      return this.$store.getters.cartTotal
    }
  },
  methods: {
    addToCart (index) {
      const product = this.products[index]
      this.$store.commit('addToCart', product)
    },
    removeFromCart (index) {
      this.$store.commit('removeFromCart', index)
    }
  }
}
</script>

const store = new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart (state, product) {
      state.cart.push(product)
    },
    removeFromCart (state, index) {
      state.cart.splice(index, 1)
    }
  },
  getters: {
    cartTotal: state => {
      return state.cart.reduce((total, product) => {
        return total + product.price
      }, 0)
    }
  }
})

结论

Vuex是Vue.js的一个状态管理工具，方便处理组件之间的数据共享问题。Vuex包含了五个基本概念：State、Getter、Mutation、Action和Module。在组件中使用Vuex可以提高代码的复用性和可维护性。