Vuex从入门到实战（一）——Vuex概述及使用vue ui创建项目(配图文！小白也看得懂）

学习地址：https://www.bilibili.com/video/BV1h7411N7bg?p=1

一、Vuex概述

Vuex是一个专为Vue.js应用程序开发的状态管理模式，说白了就是为了实现组件之间数据的共享。

对于Vue来说，组件之间共享数据的方式：

1. 父组件向子组件传值：v-bind属性绑定
2. 子组件向父组件传值：v-on时间绑定
3. 兄弟组件之间共享数据：EventBus
   • $on 接受数据的那个组件
   • $emit 发送数据的那个组件

二、Vuex安装

1 安装vuex依赖包

npm install vuex --save

2.导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3.创建store对象

const store = new Vuex.Store({
   
    // state中存放的就是全局共享的数据
    state: {
   count: 0}
})

4.将store对象挂载到vue实例中

new Vue({
   
    el: '#app',
    render: h => h(app),
    router,
    // 将创建的共享数据对象，挂载到Vue实例中
    // 所有的组件，就可以直接从store中获取全局的数据了
    store
})

三、使用vue ui新建项目

1. npm install vuex之后就可以使用vue命令了，在命令行中输入vue ui（会启动一个本地服务）；

2.填写一写对项目的配置

1. 修改项目创建地址到自己想要的盘；
   

2. 填写项目名——vuex_demo1；

3. 选择包管理器——yarn；

4. 选择初始化git仓库——init project——>下一步；

5. 选择一套预设，这里我们选择手动来熟悉一下——>下一步；
   
   

6. 除了预设的还要打开这四项：Bable、Vuex、Linter/Formatter、使用配置文件；
   

7. 格式化配置选项我们选择上图中的标准；

8. 万事大吉，点击创建项目，过程有点慢，耐心等一下。

现在使用编辑器打开我们新建的项目，主要看一下store/index.js、main.js，它是完全符合上面第二点安装过程的。

五、熟悉ui管理页

插件：查看已安装的插件，可以搜索下载所需要的其他插件;
依赖：可以看运行依赖和开发依赖，并且标注了要求版本及最新版本
配置： 可以修改基础配置，比如输出目录什么的
任务：包含各种可运行的命令，如serve、build、lint。点击serve可以直接运行我们的项目，如上图，输入localhost:8080可以看到本地页面。

转载：https://blog.csdn.net/weixin_43361722/article/details/116239122