前端基础之《Vue（19）—状态管理》

一、什么是状态管理

1、Vue版本问题
Vue2 + Vuex3
Vue3 + Vuex4 / Pinia2

在使用任何技术的时候，都先要去搜索一下版本，你的版本和脚手架环境是否兼容。

2、安装Vuex
yarn add vuex@3.6.2

3、状态管理
状态，在应用程序中表示数据，状态管理就是数据管理。

4、作用
（1）组件之间的数据共享。比如有个组件A和组件B，两个组件之间关系不清楚，是父子关系还是兄弟关系。现在A和B要共享数据。
（2）页面第一次请求后，把数据缓存在本地。

5、在应用程序中，如果通信方案用的混乱，导致数据流的混乱。正确选择通信方案，数据流管理要合理。

6、怎么学习Vuex
一个流程图，五个概念，四个map方法。

二、导入store

1、建立目录src/store/index.js

// 安装并注册
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) // 插件注册提供$store这个api// 创建store
const store = new Vuex.Store({// state// 凡是定义在这里的数据，就可以被组件共享// 特点：当state数据被组件们使用，如果state数据发生变化，使用到数据的组件会自动完成更新（响应式特点）state: {msg: 'Hello Vuex'}
})// 抛出
export default store

（1）安装并注册
（2）创建store
（3）抛出

2、main.js导入store实例

// 从node_modules中导入vue模块
import Vue from 'vue'
// 导入App组件（.vue单文件组织）
import App from './App.vue'// 关闭生产环境的vue提示
Vue.config.productionTip = false// 导入路由实例
import router from './router'// 导入store实例
import store from './store' // index.js可以省略// 创建vue响应式系统
const app = new Vue({// 用于把App组件渲染到#app挂载节点中去（在index.html中）render: h => h(App),router: router,store: store
})// 挂载
app.$mount('#app')