Vue 搭建Vuex环境详解

简介

Vuex是Vue.js的官方状态管理库，它可以更好的管理Vue.js应用中的数据流，包括数据的状态、存储和同步。社区中已经有很多文章介绍Vuex的基础使用，本文将详细讲解如何在Vue.js中搭建Vuex环境，并提供两个示例说明。

搭建Vuex环境

1. 安装Vuex

在Vue.js项目中使用Vuex，需要先安装它。

npm install vuex --save

1. 创建store.js文件

在项目的根目录中创建一个store.js文件，用来存储store。Vuex的store是一个对象，它集中管理应用的状态。

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

Vue.use(Vuex);

const store = new Vuex.Store({
  // 这里存放状态
  state: {},
  // 更改状态的方法
  mutations: {},
  // 分发action的方法
  actions: {},
  // 获取状态的方法
  getters: {}
});

export default store;

1. 在main.js中引入store.js

在创建Vue实例之前，在main.js中引入store.js，并将store注入到Vue实例中。

import Vue from 'vue';
import store from './store';

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

示例说明

示例一：计数器

以下代码展示了一个简单的计数器示例，通过Vuex的store管理计数器的状态和变化。用户点击加号或减号按钮时，会触发dispatch方法，dispatch方法会调用actions中的inc或dec方法，最终通过mutations改变状态。

// store.js

const store = new Vuex.Store({
  // 状态
  state: {
    count: 0
  },
  // 改变状态的方法
  mutations: {
    inc(state) {
      state.count++;
    },
    dec(state) {
      state.count--;
    }
  },
  // 分发action的方法
  actions: {
    inc: ({ commit }) => commit('inc'),
    dec: ({ commit }) => commit('dec')
  },
  // 获取状态的方法
  getters: {
    count: state => state.count
  }
});

export default store;

// counter.vue

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="inc">+</button>
    <button @click="dec">-</button>
  </div>
</template>

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

export default {
  // 映射count状态和方法到组件
  computed: {
    ...mapGetters([
      'count'
    ])
  },
  methods: {
    ...mapActions([
      'inc',
      'dec'
    ])
  }
};
</script>

示例二：购物车

以下代码展示了一个简单的购物车示例，用户可以添加商品到购物车并查看购物车中的商品和总价。购物车状态的管理由Vuex的store完成。

// store.js

const store = new Vuex.Store({
  // 状态
  state: {
    cart: []
  },
  // 改变状态的方法
  mutations: {
    addToCart(state, product) {
      const p = state.cart.find(p => p.id === product.id);
      if (p) {
        p.count++;
      } else {
        state.cart.push({ ...product, count: 1 });
      }
    },
    removeFromCart(state, product) {
      const index = state.cart.findIndex(p => p.id === product.id);
      if (index !== -1) {
        state.cart.splice(index, 1);
      }
    }
  },
  // 分发action的方法
  actions: {
    addToCart({ commit }, product) {
      commit('addToCart', product);
    },
    removeFromCart({ commit }, product) {
      commit('removeFromCart', product);
    }
  },
  // 获取状态的方法
  getters: {
    cart: state => state.cart,
    totalPrice: state => state.cart.reduce((total, p) => total + p.price * p.count, 0)
  }
});

export default store;

// products.vue

<template>
  <div>
    <ul>
      <li v-for="p in products" :key="p.id">
        {{ p.name }} - {{ p.price }}
        <button @click="addToCart(p)">添加到购物车</button>
      </li>
    </ul>
  </div>
</template>

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

export default {
  data() {
    return {
      products: [
        {
          id: 1,
          name: '商品1',
          price: 10
        },
        {
          id: 2,
          name: '商品2',
          price: 20
        },
        {
          id: 3,
          name: '商品3',
          price: 30
        }
      ]
    };
  },
  methods: {
    ...mapActions([
      'addToCart'
    ])
  }
};
</script>

// cart.vue

<template>
  <div>
    <ul>
      <li v-for="p in cart" :key="p.id">
        {{ p.name }} x {{ p.count }}
        <button @click="removeFromCart(p)">删除</button>
      </li>
    </ul>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

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

export default {
  computed: {
    ...mapGetters([
      'cart',
      'totalPrice'
    ])
  },
  methods: {
    ...mapActions([
      'removeFromCart'
    ])
  }
};
</script>

以上两个示例均展示了Vuex的用法，开发者可以根据自身项目需求进行选择，进行状态的统一管理。