vuex的核心概念和基本使用详解

下面是"vuex的核心概念和基本使用详解"的完整攻略。

Vuex是什么

Vuex是一个专门为Vue.js设计的状态管理库。它能够解决多个组件共享同一个状态的问题，使得组件之间的通信更加方便和高效。

Vuex的核心概念

在使用vuex之前，我们需要先了解它所涉及到的一些核心概念。

State

State就是状态的意思，它是存储在Vuex中的数据源，也就是我们需要共享的数据。多个组件可以共享同一个状态，当一个组件修改了状态，其他组件也会同步更新。

Getter

Getter可以理解为Vuex的计算属性，它是对state的进一步处理和封装，方便组件的使用。有点像state的计算属性。

Mutation

Mutation是Vuex中专门用于修改state的方法。它必须是同步函数。

Action

Action用于处理异步任务。 它是Mutations的升级版，它不直接修改state的值，而是触发mutation来修改state的值。

Module

在一个复杂的应用程序中，状态和操作通常合并在一起。 模块允许将状态和操作分离到不同的命名空间下。

基本使用示例

接下来，我们通过两个基本的示例来演示Vuex的使用。

示例1

假设我们需要记录当前的用户登录状态。当用户登录时，我们需要将用户的信息存储到状态中，并且在任何一个组件都能访问这个信息。

首先，我们需要在Vuex中定义一个state，

const store = new Vuex.Store({
  state: {
    userInfo: null
  }
})

然后，我们需要定义一个mutation来修改这个状态中的信息，

// 定义一个mutation
const SET_USER_INFO = 'SET_USER_INFO'

const store = new Vuex.Store({
  state: {
    userInfo: null
  },
  mutation: {
    [SET_USER_INFO] (state, user) {
      state.userInfo = user
    }
  }
})

现在，我们有了一个能够修改状态的方法， 那么如何在组件中使用这个方法呢？

我们可以使用Vuex提供的mapMutations函数将mutation映射到组件中。 在组件中调用映射后的mutation方法来触发mutation。

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations(['SET_USER_INFO']),
    login () {
      // 登录时触发mutation修改用户信息
      this.SET_USER_INFO({
        name: '张三',
        age: '18',
        sex: 'man'
      })
    }
  }
}

这样就能够通过state中的userInfo来访问用户信息。

示例2

我们现在要实现一个购物车的功能，可以将商品添加到购物车中，并且显示购物车商品的数量。

首先，我们需要在Vuex中定义一个state，

const store = new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addCart (state, product) {
      state.cart.push(product)
    }
  },
  getters: {
    cartCount: state => {
      return state.cart.length
    }
  }
})

在上面的代码中，我们将购物车的状态定义为了一个数组cart，数组的长度即为购物车中商品的数量。 当用户将商品添加到购物车中时，我们需要调用addCart这个mutation方法来修改状态。 我们还定义了一个计算属性cartCount，用来计算购物车中商品的数量。

接下来，我们需要在组件中使用这些状态和方法。

<template>
  <div>
    <button @click="addToCart">加入购物车</button>
    <span>购物车中的商品数量：{{cartCount}}</span>
  </div>
</template>

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

export default {
  computed: {
    ...mapState({
      cart: state => state.cart
    }),
    ...mapGetters(['cartCount'])
  },
  methods: {
    ...mapMutations(['addCart']),
    addToCart () {
      const product = {
        name: '商品名',
        price: 100
      }
      // 调用mutation方法修改状态
      this.addCart(product)
    }
  }
}
</script>

在这个组件中，我们使用了Vuex提供的mapState、mapMutations和mapGetters函数来简化Vuex的使用。 我们通过mapState将state中的cart映射到了组件的computed计算属性中， 然后通过mapGetters将vuex中的cartCount映射到了组件的computed计算属性中。 最后，我们在addToCart方法中调用了mapMutations映射后的addCart方法来修改vuex状态中的cart数组。

通过上面这些步骤，我们就可以实现一个基本的购物车功能，并同时管理购物车商品数量的显示。