浅学vuex的定义以及实际使用场景

最新推荐文章于 2024-06-01 10:00:35 发布

小新-alive

最新推荐文章于 2024-06-01 10:00:35 发布

阅读量176

点赞数

文章标签：开发语言 javascript vue.js

本文链接：https://blog.csdn.net/alive_new/article/details/132388856

版权

Vuex

在Vue.js应用程序中，当我们面对复杂的组件通信和状态管理问题时，Vuex是一个强大的解决方案。Vuex是Vue官方提供的状态管理库，它实现了一种集中式存储管理的模式，使得状态的获取和修改更加直观和可维护。

一、Vuex的核心概念

在开始学习Vuex之前，我们需要了解它的核心概念。Vuex包含以下几个关键概念：

State

应用程序的状态存储在单一状态树中，即state对象。它类似于组件的data选项，但是可以被所有组件共享和访问。

在Vuex中，state是存储应用程序状态的对象。
state中的每个属性都可以被组件访问和使用。
在Vuex store的选项中，定义你的状态对象。

const store = new Vuex.Store({
  state: {
    count: 0,
    user: null,
    products: [],
  },
});

在组件中，可以通过this.$store.state访问和使用状态。

// 获取状态
const count = this.$store.state.count;
const user = this.$store.state.user;
const products = this.$store.state.products;

// 修改状态
this.$store.state.count = 10;

在上面的代码中，state对象包含了应用程序的状态。组件可以通过this.$store.state访问和使用其中的属性，如count、user和products。可以直接修改state中的属性，但不推荐直接修改，而是通过mutations来进行状态变更。

Mutations

mutations是用于修改状态的函数。它们接受state作为第一个参数，并且可以在函数体内对状态进行修改。突变是同步的，用于追踪状态的变化。

mutations是Vuex store中用于修改state的方法。
mutations必须是同步函数，用于对state进行突变。
在Vuex store的选项中，定义你的mutations。

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    setCount(state, value) {
      state.count = value;
    },
  },
});

在组件中，可以通过commit方法来触发mutations方法。

methods: {
  incrementCount() {
    this.$store.commit('increment');
  },
  updateCount(value) {
    this.$store.commit('setCount', value);
  },
},

在上面的代码中，定义了两个mutations：increment和setCount。increment方法用于将count属性增加1。setCount方法用于将count属性设置为传入的值。在组件中，通过this.$store.commit来触发对应的mutations方法，从而修改state中的状态。

Actions

actions用于处理异步操作和封装多个突变。它们可以包含任意异步操作，并在完成后触发适当的突变来修改状态。动作可以包含异步逻辑，如数据获取、调用API等。

actions用于处理异步操作，可以包含任意的异步代码。
actions可以通过触发mutations来修改state。
在Vuex store的选项中，定义你的actions。

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

在组件中，可以通过dispatch方法来触发actions。

methods: {
  incrementCountAsync() {
    this.$store.dispatch('incrementAsync');
  },
},

在上面的代码中，定义了一个actions：incrementAsync。incrementAsync方法包含一个异步操作，通过延迟1秒钟来模拟异步行为。在异步操作完成后，通过context.commit来触发对应的mutations方法，从而修改state中的状态。在组件中，通过this.$store.dispatch来触发对应的actions方法，从而执行异步操作。

Getters

getters用于从状态中派生出新的状态。它们类似于组件的计算属性，可以对状态进行过滤、计算和缓存等操作。

getters用于从state中派生出新的状态。
getters可以被视为存储在Vuex store中的计算属性。
在Vuex store的选项中，定义你的getters。

const store = new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {
    doubleCount(state) {
      return state.count * 2;
    },
  },
});

在组件中，可以通过this.$store.getters访问和使用getters。

// 获取派生状态
const doubleCount = this.$store.getters.doubleCount;

在上面的代码中，定义了一个getters：doubleCount。doubleCount是一个派生状态，通过将count属性乘以2来计算得到。在组件中，通过this.$store.getters来访问和使用getters，如获取doubleCount的值。

二、安装和配置Vuex

首先，我们需要通过npm或yarn安装Vuex。

npm install vuex

然后，在Vue应用程序的入口文件（通常是main.js）中导入和使用Vuex。

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

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

new Vue({
  store,
  // ...
});

三、在组件中使用Vuex

现在，我们已经完成了Vuex的安装和配置，接下来让我们看看如何在组件中使用Vuex。

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

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    doubleCount() {
      return this.$store.getters.doubleCount;
    },
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
  },
};
</script>

在上述代码中，我们通过computed属性将state和getters映射到组件中。count计算属性获取state.count的值，而doubleCount计算属性获取getters.doubleCount的值。

在方法部分，我们使用commit方法来触发mutations中的increment突变，以及使用dispatch方法来触发actions中的incrementAsync动作。

通过上述代码，我们可以在组件中访问和修改Vuex存储的状态，实现了状态的集中管理和组件间的通信。

四、Vuex的实际例子

Vuex来管理购物车状态

假设我们的购物车具有以下要求：

用户可以将商品添加到购物车中。
用户可以从购物车中删除商品。
用户可以更新购物车中商品的数量。
购物车需要计算总价和商品数量。
购物车状态需要在多个组件之间共享。

下面是一个使用Vuex实现购物车功能的示例：

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    cartItems: [],
  },
  mutations: {
    addToCart(state, item) {
      state.cartItems.push(item);
    },
    removeFromCart(state, itemId) {
      state.cartItems = state.cartItems.filter(item => item.id !== itemId);
    },
    updateCartItemQuantity(state, { itemId, quantity }) {
      const cartItem = state.cartItems.find(item => item.id === itemId);
      if (cartItem) {
        cartItem.quantity = quantity;
      }
    },
  },
  getters: {
    cartTotalPrice(state) {
      return state.cartItems.reduce((total, item) => total + item.price * item.quantity, 0);
    },
    cartTotalQuantity(state) {
      return state.cartItems.reduce((total, item) => total + item.quantity, 0);
    },
  },
});

export default store;

在上述代码中，我们创建了一个名为cartItems的状态，用于存储购物车中的商品列表。我们定义了三个突变（mutations）：addToCart用于将商品添加到购物车中，removeFromCart用于从购物车中删除商品，updateCartItemQuantity用于更新购物车中商品的数量。

同时，我们还定义了两个获取器（getters）：cartTotalPrice用于计算购物车中所有商品的总价，cartTotalQuantity用于计算购物车中所有商品的数量。

接下来，在Vue应用程序的入口文件中，我们将Vuex store导入并配置为全局状态。

// main.js
import Vue from 'vue';
import store from './store';
import App from './App.vue';

new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

现在，我们可以在组件中使用Vuex来管理购物车状态。

<template>
  <div>
    <h2>Shopping Cart</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        {{ item.name }} - Quantity: {{ item.quantity }}
        <button @click="removeFromCart(item.id)">Remove</button>
      </li>
    </ul>
    <p>Total Price: {{ cartTotalPrice }}</p>
    <p>Total Quantity: {{ cartTotalQuantity }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['cartItems']),
    ...mapGetters(['cartTotalPrice', 'cartTotalQuantity']),
  },
  methods: {
    ...mapMutations(['removeFromCart']),
  },
};
</script>