详解如何在vue-cli中使用vuex

下面为您详细讲解如何在vue-cli中使用vuex。

什么是Vuex？

Vuex是一个专为Vue.js应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态，并以可预测的方式发起状态的改变。它的核心概念包括Store、State、Getter、Mutation、Action和Module。

如何在vue-cli中使用vuex？

以下是一些简单的步骤，以使用vuex管理vue-cli应用程序中的状态。

步骤一：安装vuex

在vue-cli项目中安装vuex：

npm install vuex --save

步骤二：创建一个Store

在项目src目录下新建一个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++
    }
  }
})

export default store

步骤三：将Store注入Vue实例

在src目录下新增一个main.js文件，并对main.js进行如下配置:

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

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

在这里，我们将store注入到Vue实例以使其在所有的组件中可用。

步骤四：在Vue组件中使用Store

在Vue组件中可以使用Vuex的两个钩子：mapState和store.dispatch。

1. mapState

用于将Vuex的状态映射到组件的computed计算属性上，具体用法如下：

import { mapState } from 'vuex'

export default {
  computed: mapState({
    count: state => state.count
  })
}

1. store.dispatch

用于分发一个带有类型的actions，具体用法如下：

import { mapActions } from 'vuex'

export default {
  methods: mapActions([
    'increment'
  ])
}

在上面的代码中，我们将increment动作分发到Store中，当在组件中访问这个动作时，调用函数store.dispatch('increment')进行提交。

示例说明

下面我们通过两个示例来说明在Vue-cli中如何使用Vuex。

示例一：计数器

首先，在src目录下的App.vue文件中，我们定义如下模板：

<template>
  <div id="app">
    Count: {{ count }}
    <button @click="increment">+</button>
  </div>
</template>

接下来，我们需要导入Vuex的mapState和mapActions方法。先在组件的scripts部分中，添加以下代码：

import { mapState, mapActions } from 'vuex';

接着，在计算属性computed的部分中，我们可以直接将Vuex的状态与组件的data属性进行绑定。具体来讲，我们可以用mapState方法做到这一点：

computed: mapState({
    // 把 state 上的 count 对应到组件的 count 上
    count: state => state.count
  })

最后，在methods中使用mapActions方法来分发increment的动作：

methods: mapActions([
    'increment'
  ])

完整代码范例：

<template>
  <div id="app">
    Count: {{ count }}
    <button @click="increment">+</button>
  </div>
</template>

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

export default {
  computed: mapState({
    // 把 state 上的 count 对应到组件的 count 上
    count: state => state.count
  }),
  methods: mapActions([
    'increment'
  ])
};
</script>

示例二：商品列表

在列表页中，我们可以通过Store的state属性来实现数据的动态渲染。在这里，我们可以分别在Store中写入两个模拟数据用于商品列表的展示。首先，先在store.js中添加以下代码：

state: {
      products: [
        { name: 'Product A', price: 100 },
        { name: 'Product B', price: 200 },
        { name: 'Product C', price: 300 },
        { name: 'Product D', price: 400 },
        { name: 'Product E', price: 500 },
        { name: 'Product F', price: 600 }
      ],
      cartItems: []
    },

在其中，products是存储商品信息的数据对象，cartItems是存储加入购物车的商品信息的数据对象。

接下来，在App.vue文件中，我们可以通过mapState方法将Store中的商品信息动态渲染在组件的标记上。具体实现方式如下：

<template>
  <div>
      <h3>商品列表：</h3>
      <ul>
        <li v-for="product in products" :key="product.name">
          {{ product.name }} - {{ product.price }}元
          <button @click="addToCart(product)">加入购物车</button>
        </li>
      </ul>

      <h3>购物车：</h3>
      <ul>
        <li v-for="(item, index) in cartItems" :key="index">
          {{ item.name }} - {{ item.price }}元
        </li>
      </ul>
  </div>
</template>

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

export default {
  computed: mapState({
    // 把 state 上的 count 对应到组件的 count 上
    products: state => state.products,
    cartItems: state => state.cartItems
  }),
  methods: {
    ...mapActions([
      'addToCart'
    ])
  }
}
</script>

在上面的代码中，我们完成了商品列表的动态展示和购物车的加入操作。我们在组件上定义了一个按钮，实现添加购物车的功能。在点击按钮后，它会触发action中的方法，在在购物车中添加相应的商品信息。

完整的范例代码如下：

<template>
  <div>
      <h3>商品列表：</h3>
      <ul>
        <li v-for="product in products" :key="product.name">
          {{ product.name }} - {{ product.price }}元
          <button @click="addToCart(product)">加入购物车</button>
        </li>
      </ul>

      <h3>购物车：</h3>
      <ul>
        <li v-for="(item, index) in cartItems" :key="index">
          {{ item.name }} - {{ item.price }}元
        </li>
      </ul>
  </div>
</template>

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

export default {
  computed: mapState({
    // 把 state 上的 count 对应到组件的 count 上
    products: state => state.products,
    cartItems: state => state.cartItems
  }),
  methods: {
    ...mapActions([
      'addToCart'
    ])
  }
}
</script>