Vue-CLI与Vuex使用方法实例分析

Vue-CLI

Vue-CLI是Vue.js官方提供的一个脚手架工具，它可以帮助我们快速搭建基于Vue.js的项目，并提供一些常用的插件和配置。

安装Vue-CLI

安装前请确保已安装Node.js和npm（Node.js的包管理器），在命令行中执行以下命令：

npm install -g vue-cli

创建Vue项目

在命令行中执行以下命令来创建Vue项目：

vue init webpack my-project

这里以创建一个名为“my-project”的项目作为示例，执行该命令后，Vue-CLI会自动下载相关依赖，并生成一个基于webpack的Vue项目模板。

运行Vue项目

在命令行中进入项目目录，执行以下命令来启动Vue项目：

npm run dev

该命令会启动一个开发服务器，并自动打开浏览器，在浏览器中即可访问Vue项目。

Vuex

Vuex是Vue.js官方提供的一个状态管理库，可以用于管理全局共享的数据和逻辑。

安装Vuex

在命令行中进入项目目录，执行以下命令来安装Vuex：

npm install vuex --save

使用Vuex

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

1. 在“src”目录下创建一个“store”目录，用来存放Vuex相关文件。

2. 在“store”目录下创建一个“index.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');
    }
  }
});

export default store;

上述代码定义了一个包含一个计数器的Vuex Store，其中：

• state：包含了应用的状态。在这里，只有一个计数器，初始值为0。
• mutations：修改状态的方法。在这里，只有一个mutation方法，修改包含计数器的state。
• actions：定义了一个包含increment方法的actions，该方法触发mutations中的increment方法。

3. 在Vue组件中使用Vuex

以下是在Vue组件中使用Vuex的示例：

<template>
  <div>
    <p>count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  computed: mapState(['count']),
  methods: mapActions(['increment'])
};
</script>

上述代码显示了计数器的值，并提供了一个“Increment”按钮，点击该按钮触发increment方法。

使用mapState和mapActions方法将Vuex中的状态和操作映射到当前Vue组件中，从而可以直接在组件中使用。

至此，我们已经完成了一个简单的Vue项目，并使用Vuex实现了全局共享的计数器功能。