vue3.2中的vuex使用详解

下面是关于vue3.2中的vuex使用详解的完整攻略。

1. 什么是Vuex

Vuex是Vue.js应用程序的状态管理模式。它通过一个集中的存储管理所有组件的状态，并以相应的规则保证状态以可预测的方式发生变化。

2. 如何使用Vuex

2.1 安装Vuex

在vue项目中使用Vuex，需要先安装Vuex。使用npm安装：

npm install vuex --save

2.2 Vue中使用Vuex

在Vue项目中，需要先引入Vuex，并将其挂载到Vue中。

import {createStore} from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = createStore({
  state: {...},
  mutations: {...},
  actions: {...},
  getters: {...}
})

export default store

其中，state表示存储的状态值，mutations表示提交对状态的更改，actions表示异步操作，getters表示从state中派生出一些状态。

2.3 在组件中使用Vuex

在组件中使用Vuex，需要使用Vue提供的mapState、mapMutations、mapActions和mapGetters四个辅助函数进行状态管理。

2.3.1 mapState使用示例

mapState函数可以直接将Vuex的state映射到组件的计算属性中。

import {mapState} from 'vuex'

export default {
  // ...
  computed: {
    ...mapState({
      count: state => state.count
    })
  }
}

2.3.2 mapMutations使用示例

mapMutations函数可以将Vuex的mutations映射到组件的methods中。

import {mapMutations} from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      'decrement' // 将 `this.decrement()` 映射为 `this.$store.commit('decrement')`
    ])
  }
}

2.3.3 mapActions使用示例

mapActions函数可以将Vuex的actions映射到组件的methods中。

import {mapActions} from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions([
      'incrementAsync', // 将 `this.incrementAsync()` 映射为 `this.$store.dispatch('incrementAsync')`
      'decrementAsync' // 将 `this.decrementAsync()` 映射为 `this.$store.dispatch('decrementAsync')`
    ])
  }
}

2.3.4 mapGetters使用示例

mapGetters函数可以将Vuex的getters映射到组件的计算属性中。

import {mapGetters} from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters([
      'doneTodosCount'
    ])
  }
}

3. 示例说明

3.1 示例一

下面是一个简单的示例，说明如何在Vuex中管理计数器的状态。

安装Vuex

使用npm安装Vuex：

npm install vuex

在Vue项目中使用Vuex

在Vue项目中，需要先引入Vuex，并将其挂载到Vue中。

import {createStore} from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = createStore({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    },
    decrement(state) {
      state.count--
    }
  },
  actions: {
    incrementAsync({commit}) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    },
    decrementAsync({commit}) {
      setTimeout(() => {
        commit('decrement')
      }, 1000)
    }
  },
  getters: {
    doneTodosCount: state => {
      return state.count
    }
  }
})

export default store

在组件中使用Vuex

在组件中使用Vuex，需要使用Vue提供的mapState、mapMutations、mapActions和mapGetters四个辅助函数进行状态管理。

<template>
  <div>
    <span>{{count}}</span>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </div>
</template>

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

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

3.2 示例二

下面是另一个示例，说明如何在Vuex中管理购物车的状态。

安装Vuex

使用npm安装Vuex：

npm install vuex

在Vue项目中使用Vuex

在Vue项目中，需要先引入Vuex，并将其挂载到Vue中。

import {createStore} from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = createStore({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, product) {
      const item = state.cart.find(i => i.id === product.id)
      if (item) {
        item.quantity++
      } else {
        state.cart.push({...product, quantity: 1})
      }
    }
  },
  actions: {},
  getters: {
    cartCount: state => {
      return state.cart.reduce((count, item) => count + item.quantity, 0)
    }
  }
})

export default store

在组件中使用Vuex

在组件中使用Vuex，需要使用Vue提供的mapState、mapMutations、mapActions和mapGetters四个辅助函数进行状态管理。

<template>
  <div>
    <h2>购物车</h2>
    <p>商品数量：{{cartCount}}</p>
    <ul>
      <li v-for="item in cart" :key="item.id">{{item.name}} * {{item.quantity}}</li>
    </ul>
    <button @click="addToCart({id: 1, name: '商品1', price: 100})">加入购物车</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState({
      cart: state => state.cart
    }),
    ...mapGetters([
      'cartCount'
    ])
  },
  methods: {
    ...mapMutations([
      'addToCart'
    ]),
    ...mapActions([
    ])
  }
}
</script>

以上就是关于vue3.2中的vuex使用详解的完整攻略以及两个示例的详细说明。