简述vue状态管理模式之vuex

下面是详细讲解“简述Vue状态管理模式之Vuex”的攻略。

规划状态

在使用Vuex之前，我们需要先规划出需要管理的状态。这些状态可能是组件之间需要共享的数据，例如用户登录状态、购物车商品列表、主题等。

Vuex状态应该以应用程序的核心管理问题为基础，需要考虑的因素如下：

• 所有组件都需要此状态吗？
• 这种状态是可变的，还是不变的？
• 这种状态是从哪里来的？

安装Vuex

在使用Vuex时，我们需要先安装它。可以使用npm安装命令或者直接引入外部CDN。

// 使用npm安装
npm install vuex --save

// 引入外部CDN
<script src="https://cdn.jsdelivr.net/npm/vuex"></script>

创建Vuex store

Vuex使用一个存储对象来存储状态。需要在Vue实例中注入store对象，以便在应用程序中的任何组件中对状态进行访问。

创建Vuex store时，需要考虑以下几个方面：

• 状态：共享的状态对象。
• Getter：类似于Vue实例计算属性，用于从状态中派生新状态。
• Mutation：用于修改状态的方法。只能同步执行。
• Action：异步执行Mutation。

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

Vue.use(Vuex);

// 创建store对象
const store = new Vuex.Store({
  state: {
    count: 0,
    cart: []
  },
  getters: {
    cartCount: state => state.cart.reduce((total, item) => total + item.count, 0)
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
    addToCart(state, payload) {
      const item = state.cart.find(item => item.id === payload.id);
      if (item) {
        item.count++;
      } else {
        state.cart.push({ ...payload, count: 1 });
      }
    }
  },
  actions: {
    addToCartAsync({ commit }, payload) {
      setTimeout(() => {
        commit('addToCart', payload);
      }, 1000);
    }
  }
});

export default store;

在Vue组件中使用状态

在Vue组件中使用Vuex状态需要使用store对象。可以通过Vue实例的$store属性或者在组件选项中注入store对象。

<script>
export default {
  name: 'Cart',
  computed: {
    cartCount() {
      return this.$store.getters.cartCount;
    }
  },
  methods: {
    addToCart() {
      this.$store.commit('addToCart', { id: 1, name: '商品1', price: 10 });
    },
    addToCartAsync() {
      this.$store.dispatch('addToCartAsync', { id: 2, name: '商品2', price: 20 });
    }
  }
}
</script>

示例说明

示例1：计数器应用

这是一个简单的计数器应用，包含两个按钮分别用于增加和减少计数器。通过Vuex store管理计数器状态，分别使用Mutation和Getter实现了计数器状态的修改和派生。

// store.js文件
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    }
  },
  getters: {
    count(state) {
      return state.count;
    }
  }
})

<!-- Counter.vue组件 -->
<template>
  <div>
    <p>当前计数器的值为：{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>

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

示例2：購物車應用

这是一个简单的購物車应用，通过Vuex store管理購物車狀態。使用Mutation和Action将商品添加到購物車中，并使用Getter计算購物車中商品的總數量。

// store.js文件
export default new Vuex.Store({
  state: {
    cart: []
  },
  mutations: {
    addToCart(state, payload) {
      const item = state.cart.find(item => item.id === payload.id);
      if (item) {
        item.count++;
      } else {
        state.cart.push({ ...payload, count: 1 });
      }
    }
  },
  actions: {
    addToCartAsync(context, payload) {
      setTimeout(() => {
        context.commit('addToCart', payload);
      }, 1000);
    }
  },
  getters: {
    cartCount(state) {
      return state.cart.reduce((total, item) => total + item.count, 0);
    }
  }
})

<!-- ShoppingCart.vue组件 -->
<template>
  <div>
    <p>购物车中有 {{ cartCount }} 件商品。</p>
    <button @click="addToCart">添加商品到购物车</button>
    <button @click="addToCartAsync">异步添加商品到购物车</button>
  </div>
</template>

<script>
export default {
  computed: {
    cartCount() {
      return this.$store.getters.cartCount;
    }
  },
  methods: {
    addToCart() {
      this.$store.commit('addToCart', { id: 1, name: '商品1', price: 10 });
    },
    addToCartAsync() {
      this.$store.dispatch('addToCartAsync', { id: 2, name: '商品2', price: 20 });
    }
  }
}
</script>

希望以上内容能够对你有所帮助！