【博学谷学习记录】超强总结,用心分享丨前端开发:vuex概述

vuex

一、vuex 概述

vuex 是一个 vue 的状态管理工具, 状态就是数据
vuex是一个插件工具，可以帮我们vue管理通用的数据
之前如果要进行跨组件的数据通信 => 父传子，子传父 => 一旦组件关系复杂，数据非常难以维护

二、vuex基本概念

中文文档：https://vuex.vuejs.org/zh/guide/
vuex是vue的状态管理工具，状态即数据。 状态管理就是集中管理vue中 通用的 一些数据
注意（官方原文）：
不是所有的场景都适用于vuex，只有在必要的时候才使用vuex
使用了vuex之后，会附加更多的框架中的概念进来，增加了项目的复杂度 （数据的操作更便捷，数据的流动更清晰）

三、vuex的优点

vuex的作用是解决《多组件状态共享》的问题。
它是独立于组件而单独存在的，所有的组件都可以把它当作 一座桥梁 来进行通讯。
特点：
响应式： 只要仓库一变化，其他所有地方都更新
操作更简洁
代码量非常少, 但是需要熟悉

四、什么数据适合存到vuex中

一般情况下，只有 多个组件均需要共享的数据 ，才有必要存储在vuex中，
对于某个组件中的私有数据，依旧存储在组件自身的data中。
例如：
对于所有组件而言，当前登陆的 用户信息 是需要在全体组件之间共享的，则它可以放在vuex中
对于文章详情页组件来说，当前的用户浏览的文章列表数据则应该属于这个组件的私有数据，应该要放在这个组件data中。

五、vuex入门

vuex 的使用 - 创建仓库

1.安装 vuex, 与vue-router类似，vuex是一个独立存在的插件，如果脚手架初始化没有选 vuex，就需要额外安装。
yarn add vuex@3.4.0
2.新建 store/index.js 专门存放 vuex
为了维护项目目录的整洁，在src目录下新建一个store目录其下放置一个index.js文件。 (和 router/index.js 类似)

3.创建仓库 store/index.js

// 导入 vue
import Vue from 'vue'
// 导入 vuex
import Vuex from 'vuex'
// vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)

// 创建仓库 store
const store = new Vuex.Store()

// 导出仓库
export default store

4.在 main.js 中导入挂载到 Vue 实例上

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

Vue.config.productionTip = false

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

此刻起, 就成功创建了一个 空仓库!!