Vue计算属性 如何结合Vuex实现全局状态管理

一、Vue计算属性基础

1.1 计算属性的定义与基本使用

在Vue中，计算属性是一种基于数据响应式系统的特性。它允许我们基于其他响应式数据定义一个“虚拟”的属性，这个属性的值会根据其依赖的响应式数据的变化而自动更新。

例如，我们有一个简单的Vue实例，其中包含两个数据属性 firstName 和 lastName，我们希望通过这两个属性生成一个完整的姓名 fullName。使用计算属性就可以很方便地实现：

<template>
  <div>
    <input v-model="firstName">
    <input v-model="lastName">
    <p>{{ fullName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

在上述代码中，fullName 就是一个计算属性。它依赖于 firstName 和 lastName 这两个数据属性。当 firstName 或 lastName 发生变化时，fullName 会自动重新计算并更新视图。

1.2 计算属性的缓存机制

计算属性具有缓存机制，这是它与方法调用的重要区别。例如，如果我们将上述的 fullName 定义为一个方法：

<template>
  <div>
    <input v-model="firstName">
    <input v-model="lastName">
    <p>{{ getFullName() }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  methods: {
    getFullName() {
      return this.firstName + ' ' + this.lastName;
    }
  }
};
</script>

每次视图更新时，getFullName 方法都会被调用。而计算属性 fullName 只有在其依赖的 firstName 或 lastName 发生变化时才会重新计算。如果依赖的数据没有变化，计算属性会直接返回缓存的值，这在性能上有很大的优势，特别是在计算复杂逻辑时。

1.3 计算属性的 setter 和 getter

计算属性默认只有 getter，用于获取计算后的值。但在某些情况下，我们也可以为计算属性定义 setter。例如，我们有一个计算属性 fullName，同时希望通过设置 fullName 来分别更新 firstName 和 lastName：

<template>
  <div>
    <input v-model="fullName">
    <p>{{ firstName }}</p>
    <p>{{ lastName }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    };
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName;
      },
      set(newValue) {
        const parts = newValue.split(' ');
        this.firstName = parts[0];
        this.lastName = parts[1];
      }
    }
  }
};
</script>

在这个例子中，当我们通过 v - model 绑定 fullName 并修改其值时，setter 会被触发，从而更新 firstName 和 lastName。

二、Vuex基础

2.1 Vuex是什么及为何使用

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

在小型Vue应用中，状态管理通常相对简单，组件之间通过props和事件进行数据传递就可以满足需求。但随着应用规模的增大，组件之间的状态传递会变得复杂且难以维护。例如，一个组件可能需要获取来自多个不同层级组件的状态，或者一个状态的变化需要通知到多个不相关的组件。这时，Vuex就派上用场了，它提供了一个全局的状态存储，使得所有组件都可以方便地访问和修改状态，同时通过严格的规则保证状态变化的可追踪性和可维护性。

2.2 Vuex的核心概念

• State：Vuex 使用单一状态树，即整个应用只有一个对象包含了全部的应用层级状态。它就像是一个大仓库，存储着应用中所有组件共享的状态。例如，在一个电商应用中，购物车的商品列表、用户登录状态等都可以存储在State中。

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

Vue.use(Vuex);

const state = {
  count: 0,
  user: null
};

export default new Vuex.Store({
  state
});

• Getter：类似于Vue的计算属性，用于从State中派生一些状态。当我们需要在多个组件中使用基于State的一些相同的计算结果时，Getter就非常有用。例如，我们有一个购物车的商品列表，其中每个商品有价格和数量，我们可以通过Getter计算购物车的总价格：

const state = {
  cart: [
    { id: 1, price: 10, quantity: 2 },
    { id: 2, price: 20, quantity: 1 }
  ]
};

const getters = {
  totalPrice: state => {
    return state.cart.reduce((total, item) => {
      return total + item.price * item.quantity;
    }, 0);
  }
};

export default new Vuex.Store({
  state,
  getters
});

• Mutation：是更改Vuex中State的唯一方法。Vuex的状态变化必须是同步的，并且通过Mutation来进行。这使得状态变化变得可追踪，便于调试。例如，我们要增加购物车中某个商品的数量：

const state = {
  cart: [
    { id: 1, price: 10, quantity: 2 }
  ]
};

const mutations = {
  incrementQuantity(state, { itemId }) {
    const item = state.cart.find(i => i.id === itemId);
    if (item) {
      item.quantity++;
    }
  }
};

export default new Vuex.Store({
  state,
  mutations
});

在组件中调用Mutation：

<template>
  <button @click="incrementCartQuantity">增加数量</button>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  methods: {
  ...mapMutations(['incrementQuantity']),
    incrementCartQuantity() {
      this.incrementQuantity({ itemId: 1 });
    }
  }
};
</script>

• Action：用于处理异步操作。虽然Mutation必须是同步的，但在实际应用中，我们经常需要进行异步操作，如API调用。Action可以包含任意异步操作，并且通过触发Mutation来间接修改State。例如，我们要从服务器获取用户信息并更新到State中：

const state = {
  user: null
};

const mutations = {
  setUser(state, user) {
    state.user = user;
  }
};

const actions = {
  async fetchUser({ commit }) {
    const response = await fetch('/api/user');
    const user = await response.json();
    commit('setUser', user);
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions
});

在组件中调用Action：

<template>
  <button @click="fetchUser">获取用户信息</button>
</template>

<script>
import { mapActions } from 'vuex';

export default new Vue({
  methods: {
  ...mapActions(['fetchUser'])
  }
});
</script>

三、Vue计算属性与Vuex结合实现全局状态管理

3.1 利用计算属性获取Vuex中的状态

在Vue组件中，我们可以通过计算属性方便地获取Vuex中的状态。例如，我们在Vuex的State中有一个 count 属性，我们希望在组件中显示这个 count 的值：

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
  ...mapState(['count'])
  }
};
</script>

这里通过 mapState 辅助函数将Vuex中的 count 状态映射到组件的计算属性中。当然，我们也可以使用对象形式的 mapState 来对状态进行别名处理：

<template>
  <div>
    <p>My Count: {{ myCount }}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
  ...mapState({
      myCount: 'count'
    })
  }
};
</script>

这样，myCount 就和Vuex中的 count 状态绑定了，当 count 变化时，myCount 也会自动更新。

3.2 计算属性结合Vuex Getter进行复杂计算

结合Vuex的Getter和Vue组件的计算属性，可以进行更复杂的状态派生。例如，我们在Vuex中有一个商品列表的状态，并且有一个Getter计算商品列表的总价格。在组件中，我们可能还需要根据一些条件对这个总价格进行进一步的计算。 假设我们有一个促销活动，当总价格大于100时，打9折。

<template>
  <div>
    <p>Original Total: {{ originalTotal }}</p>
    <p>Discounted Total: {{ discountedTotal }}</p>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
  ...mapGetters(['totalPrice']),
    originalTotal() {
      return this.totalPrice;
    },
    discountedTotal() {
      return this.totalPrice > 100? this.totalPrice * 0.9 : this.totalPrice;
    }
  }
};
</script>

在这个例子中，totalPrice 是Vuex的Getter，我们通过 mapGetters 映射到组件的计算属性中。然后，我们基于 totalPrice 又定义了 originalTotal 和 discountedTotal 两个计算属性，分别表示原始总价格和打折后的总价格。

3.3 使用计算属性触发Vuex Mutation和Action

计算属性不仅可以用于获取状态，还可以通过其 setter 来触发Vuex的Mutation或Action。例如，我们有一个Vuex的 count 状态，我们希望通过在组件中修改一个计算属性的值来增加 count。

<template>
  <div>
    <input v-model="countModifier">
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  computed: {
    countModifier: {
      get() {
        return this.$store.state.count;
      },
      set(newValue) {
        this.$store.commit('incrementCount', newValue);
      }
    }
  },
  methods: {
  ...mapMutations(['incrementCount'])
  }
};
</script>

在上述代码中，countModifier 计算属性的 setter 中触发了 incrementCount Mutation，从而更新了Vuex中的 count 状态。同样，如果是异步操作，我们可以在 setter 中触发Action。

3.4 案例分析：电商应用的购物车

在一个电商应用的购物车模块中，我们可以很好地展示Vue计算属性与Vuex结合的优势。

• Vuex部分：

const state = {
  cart: [
    { id: 1, name: 'Product 1', price: 10, quantity: 1 },
    { id: 2, name: 'Product 2', price: 20, quantity: 2 }
  ]
};

const getters = {
  cartTotal(state) {
    return state.cart.reduce((total, item) => {
      return total + item.price * item.quantity;
    }, 0);
  }
};

const mutations = {
  addToCart(state, product) {
    const existingProduct = state.cart.find(p => p.id === product.id);
    if (existingProduct) {
      existingProduct.quantity++;
    } else {
      state.cart.push({...product, quantity: 1 });
    }
  },
  removeFromCart(state, productId) {
    state.cart = state.cart.filter(p => p.id!== productId);
  }
};

const actions = {
  async fetchCart({ commit }) {
    const response = await fetch('/api/cart');
    const cart = await response.json();
    commit('setCart', cart);
  }
};

export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
});

• Vue组件部分：

<template>
  <div>
    <h2>Shopping Cart</h2>
    <ul>
      <li v - for="item in cart" :key="item.id">
        {{ item.name }} - ${{ item.price }} x {{ item.quantity }} = ${{ item.price * item.quantity }}
        <button @click="removeFromCart(item.id)">Remove</button>
      </li>
    </ul>
    <p>Total: ${{ cartTotal }}</p>
    <button @click="fetchCart">Fetch Cart</button>
  </div>
</template>

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

export default {
  computed: {
  ...mapState(['cart']),
  ...mapGetters(['cartTotal'])
  },
  methods: {
  ...mapActions(['fetchCart']),
    removeFromCart(productId) {
      this.$store.commit('removeFromCart', productId);
    }
  }
};
</script>

在这个案例中，组件通过计算属性 cart 和 cartTotal 获取Vuex中的购物车列表和总价格。通过 mapActions 映射 fetchCart Action来从服务器获取购物车数据。通过在方法中直接调用 commit 触发 removeFromCart Mutation来移除购物车中的商品。这样，通过Vue计算属性和Vuex的紧密结合，实现了购物车模块的高效状态管理。

四、优化与注意事项

4.1 性能优化

• 合理使用计算属性缓存：由于计算属性具有缓存机制，在定义计算属性时，要确保其依赖的响应式数据是必要的。避免将一些不相关的数据作为计算属性的依赖，这样可以减少不必要的重新计算。例如，如果一个计算属性只依赖于Vuex中的某个状态，而不依赖于组件自身的某个很少变化的数据，就不要将组件自身的这个数据作为计算属性的依赖。
• 减少不必要的状态更新：在Vuex中，Mutation的触发应该是有必要的。尽量避免在不必要的情况下触发Mutation导致State更新，从而引起依赖该State的计算属性重新计算。例如，在更新购物车商品数量时，只有当数量真正发生变化时才触发 incrementQuantity 或 decrementQuantity Mutation。

4.2 代码结构与可维护性

• 模块化：随着应用规模的增大，Vuex的代码可能会变得庞大。可以将Vuex的State、Getter、Mutation和Action按照功能模块进行拆分。例如，将用户相关的状态管理放在一个模块，购物车相关的放在另一个模块。这样可以提高代码的可维护性和可读性。

// user.js
const state = {
  user: null
};

const getters = {
  isLoggedIn: state => {
    return state.user!== null;
  }
};

const mutations = {
  setUser(state, user) {
    state.user = user;
  }
};

const actions = {
  async login({ commit }, credentials) {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: {
        'Content - Type': 'application/json'
      },
      body: JSON.stringify(credentials)
    });
    const user = await response.json();
    commit('setUser', user);
  }
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

// cart.js
const state = {
  cart: []
};

const getters = {
  cartTotal(state) {
    return state.cart.reduce((total, item) => {
      return total + item.price * item.quantity;
    }, 0);
  }
};

const mutations = {
  addToCart(state, product) {
    //...
  },
  removeFromCart(state, productId) {
    //...
  }
};

const actions = {
  async fetchCart({ commit }) {
    //...
  }
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

然后在主 store.js 中进行合并：

import Vue from 'vue';
import Vuex from 'vuex';
import user from './user';
import cart from './cart';

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user,
    cart
  }
});

• 清晰的命名规范：无论是Vuex中的State、Getter、Mutation、Action，还是组件中的计算属性，都应该有清晰的命名规范。例如，Mutation的命名可以采用动词 + 名词的形式，如 incrementCount、setUser 等，这样可以清楚地知道该Mutation的作用。

4.3 调试与错误处理

• Vuex Devtools：使用Vuex Devtools可以方便地调试Vuex应用。它可以展示State的变化历史、Mutation和Action的触发记录等。通过它可以快速定位状态变化的问题。在Chrome浏览器中，可以安装Vuex Devtools插件，然后在Vue应用中启用它：

const store = new Vuex.Store({
  //...
});

if (process.env.NODE_ENV === 'development') {
  if (typeof window!== 'undefined' && window.__VUE_DEVTOOLS_GLOBAL_HOOK__) {
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vuex.install(store);
  }
}

• 错误处理：在Action中进行异步操作时，要注意错误处理。例如，在API调用失败时，应该在Action中捕获错误并进行相应的处理，如显示错误提示给用户。

const actions = {
  async fetchUser({ commit }) {
    try {
      const response = await fetch('/api/user');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const user = await response.json();
      commit('setUser', user);
    } catch (error) {
      console.error('Error fetching user:', error);
      // 可以在这里触发一个Mutation来设置错误状态，以便在组件中显示错误信息
    }
  }
};

通过以上对Vue计算属性与Vuex结合实现全局状态管理的详细介绍，包括基础概念、结合方式、优化与注意事项等方面，希望开发者能够更好地运用这两个强大的工具，构建出高效、可维护的Vue应用。