vuex基础

1.vuex概述

vuex是什么？

是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

他的本质就是实现组件之间数据共享的方案

第一幅图，不使用vuex,子组件向顶级父组件传递数据，需要经过一层层的父组件才能达到。

我只是想要传递个数据，却要经过很多个不相关的组件，在不使用vuex的情况下，要大范围或者频繁的数据共享是很麻烦的

第二幅图，使用vuex,创建一个全局共享的store，就不需要一个个传递了，可以直接将数据放到store里面

2.vuex统一管理的好处

1.能够在vuex中集中管理共享的数据，易于开发和后期维护

2.能够高效的实现组件之间的数据共享，提高开发效率

3.存储在vuex中的数据都是响应式的，能够实时保持数据与页面同步

（当存储在vuex中的数据发生了变化，那么引用了全局数据的那些组件也会进行刷新）

3.什么样的数据适合存储到vuex中

一般情况下，只有组件之间共享的数据，才有必要存储到vuex中。对于组件中的私有数据，依旧存储在组件自身的data中即可。

4.创建vuex初始化项目

我们选择使用vue的可视化界面来创建项目

1.首先win+r输入cmd打开命令行窗口接着输入vue ui

2.在浏览器中打开http://localhost:8000/进入项目仪表盘

3.在左上角下拉选择vue项目管理器

 我们点击创建

 选好你的路径

点击下方创建

 

点击下一步 

选择手动配置项目

点击下一步

选择babel vuex  linter/formatter

下一步

(

选择使用哪种ESLint代码规范？
ESLint with error prevention only 只是错误 ——本人选择此项
ESLint + Airbnb config airbnb代码规范
ESLint + Standard config 标准代码规范
ESLint + Prettier

pick additional lint features：选择lint特性？
lint on save ——默认
lint and fix on commit

)

创建项目，然后就是漫长的等待

4.vuex的实例

文件目录store/index.js

导入了vue,vuex这两个包

使用use函数安装了vuex

创建了vue实例并将它暴露

我们可以在state节点里面定义需要被全局共享的数据

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

我们向外导出的这个vuex实例怎样才能被使用呢

在main.js文件中导入了store实例，并且在vue实例中挂载

那么在整个vue中的组件都可以访问到这个store全局共享的数据了

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

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

小技巧

在根目录下创建..prettierrc文件

1..将分号去掉

2.将双引号边成单引号

重新格式化代码即可

{
  "semi": false,
  "singleQuote": true
}