Vuex的安装、搭建及案例详解

Vuex的安装

在使用Vuex之前，需要在项目中安装Vuex依赖包。可以通过npm或者yarn进行安装。

使用npm安装：

npm install vuex --save

使用yarn安装：

yarn add vuex

Vuex的搭建

Vuex的核心概念包括state、mutations、actions、getters和modules。

以下是一个简单的Vuex示例：

// store.js
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: {
    increment(context) {
      context.commit('increment');
    }
  },
  getters: {
    getCount: state => {
      return state.count;
    }
  },
  modules: {}
});

export default store;

1. 首先，在项目中引入Vue和Vuex。
2. 然后，创建一个新的Vuex store实例。
3. 在store实例中，定义state对象，用于存储状态。
4. 定义mutations对象，用于修改state中的数据。
5. 定义actions对象，用于异步修改state中的数据。在actions中，可以调用mutations中的方法。
6. 定义getters用于获取state中的数据。getters可以理解为state的计算属性。
7. 最后，创建一个空的modules对象。

案例详解

简单的计数器

下面我们来看一个简单的计数器的案例。假设我们有一个计数器，可以实现加1、减1和重置的功能。

首先，在Vuex的store中定义state对象，用于存储计数器的值：

state: {
  count: 0
}

然后，定义mutations对象，用于修改count的值：

mutations: {
  increment(state) {
    state.count++;
  },
  decrement(state) {
    state.count--;
  },
  reset(state) {
    state.count = 0;
  }
}

接着，定义actions对象，用于异步修改state中的数据：

actions: {
  increment(context) {
    context.commit('increment');
  },
  decrement(context) {
    context.commit('decrement');
  },
  reset(context) {
    context.commit('reset');
  }
}

最后，定义getters用于获取state中的数据：

getters: {
  getCount: state => {
    return state.count;
  }
}

在组件中使用Vuex时，需要引入Vuex的store实例。在Vue组件中，可以使用$store对象来访问Vuex store中的state、mutations、actions和getters等对象。

<template>
  <div>
    <h1>当前计数器的值为：{{count}}</h1>
    <button @click="increment">加1</button>
    <button @click="decrement">减1</button>
    <button @click="reset">重置</button>
  </div>
</template>

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

上面的代码中，我们使用了computed来计算count值，使用methods来触发actions中的方法。在methods中，使用this.$store.dispatch来调用actions中的方法。

购物车

在Vue.js中，用Vuex实现购物车的功能非常方便。下面我们来看一个购物车的示例。

首先，在Vuex的store中定义state对象，用于存储购物车的商品信息：

state: {
  cartList: []
}

然后，定义mutations对象，用于修改state中的购物车信息：

mutations: {
  addCartItem(state, item) {
    let index = state.cartList.findIndex(cartItem => {
      return cartItem.id === item.id;
    })
    if (index !== -1) {
      state.cartList[index].count++;
    } else {
      state.cartList.push(Object.assign(item, { count: 1 }));
    }
  },
  removeCartItem(state, item) {
    let index = state.cartList.findIndex(cartItem => {
      return cartItem.id === item.id;
    })
    state.cartList.splice(index, 1);
  },
  clearCart(state) {
    state.cartList = [];
  }
}

接着，定义actions对象，用于异步修改state中的购物车信息：

actions: {
  addCartItem(context, item) {
    context.commit('addCartItem', item);
  },
  removeCartItem(context, item) {
    context.commit('removeCartItem', item);
  },
  clearCart(context) {
    context.commit('clearCart');
  }
}

最后，定义getters用于获取state中的购物车信息：

getters: {
  getCartList: state => {
    return state.cartList;
  },
  getTotalPrice: state => {
    return state.cartList.reduce((total, item) => {
      return total + item.count * item.price;
    }, 0);
  },
  getTotalCount: state => {
    return state.cartList.reduce((total, item) => {
      return total + item.count;
    }, 0);
  }
}

在组件中使用Vuex来实现购物车的功能。

<template>
  <div>
    <ul>
      <li v-for="item in cartList" :key="item.id">
        <span>{{item.name}}</span>
        <span>{{item.price}}</span>
        <span>{{item.count}}</span>
        <button @click="addCartItem(item)">添加</button>
        <button @click="removeCartItem(item)">删除</button>
      </li>
    </ul>
    <div>
      <p v-if="cartList.length > 0">购物车总价：{{totalPrice}}</p>
      <p v-if="cartList.length > 0">购物车总数：{{totalCount}}</p>
      <button @click="clearCart">清空购物车</button>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    cartList() {
      return this.$store.getters.getCartList;
    },
    totalPrice() {
      return this.$store.getters.getTotalPrice;
    },
    totalCount() {
      return this.$store.getters.getTotalCount;
    }
  },
  methods: {
    addCartItem(item) {
      this.$store.dispatch('addCartItem', item);
    },
    removeCartItem(item) {
      this.$store.dispatch('removeCartItem', item);
    },
    clearCart() {
      this.$store.dispatch('clearCart');
    }
  }
}
</script>

上面的代码中，我们使用了computed来计算cartList、totalPrice和totalCount值，使用methods来触发actions中的方法。在methods中，使用this.$store.dispatch来调用actions中的方法。

以上就是Vuex的安装、搭建及案例详解的完整攻略。希望能对你的学习有所帮助。