什么是状态管理
在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序中的某一个位置，对于这些数据的管理我们就称之为是 状态管理。
在前面我们是如何管理自己的状态呢？
????????在Vue开发中，我们使用组件化的开发方式；
????????而在组件中我们定义data或者在setup中返回使用的数据，这些数据我们称之为state；
????????在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View；
????????在模块中我们会产生一些行为事件，处理这些行为事件时，有可能会修改state，这些行为事件我们称之为actions；
JavaScript开发的应用程序，已经变得越来越复杂了： ?
????????JavaScript需要管理的状态越来越多，越来越复杂；
????????这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等；
????????也包括一些UI的状态，比如某些元素是否被选中，是否显示加载动效，当前分页；
当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：
????????多个视图依赖于同一状态；
????????来自不同视图的行为需要变更同一状态；
我们是否可以通过组件数据的传递来完成呢？
????????对于一些简单的状态，确实可以通过props的传递或者Provide的方式来共享状态；
????????但是对于复杂的状态管理来说，显然单纯通过传递和共享的方式是不足以解决问题的，比如兄弟组件如何共享数据呢？
Vuex的安装
依然我们要使用vuex，首先第一步需要安装vuex：
????????我们这里使用的是vuex4.x，安装的时候需要添加 next 指定版本；
????????Vuex的安装
????????npm install vuex@next
每一个Vuex应用的核心就是store（仓库）：
????????store本质上是一个容器，它包含着你的应用中大部分的状态（state）；
Vuex和单纯的全局对象有什么区别呢？
第一：Vuex的状态存储是响应式的
????????当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会被更新；
第二：你不能直接改变store中的状态
????????改变store中的状态的唯一途径就显示提交 (commit) mutation；
????????这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够通过一些工具帮助我们更好的管理应用的状态；
使用步骤：
????????创建Store对象；
????????在app中通过插件安装；
在组件中使用store，我们按照如下的方式：
????????在模板中使用；
????????在options api中使用，比如computed；
????????在setup中使用；
//store的index.js
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
counter: 100
}
},
//不能直接操作数据，在组件中要进行commit提交，在index.js中通过mutations对数据进行修改
mutations: {
increment(state) {
state.counter++
},
decrement(state) {
state.counter--
}
}
})
export default store
//app.vue
<template>
<h2>{{ $store.state.counter }}</h2>
<button @click="increment">+1</button>
<button @click="decrement">-1</button>
</template>
<script>
export default {
name: "App",
components: {},
methods: {
increment() {
this.$store.commit("increment")
},
decrement() {
this.$store.commit("decrement")
},
},
};
</script>
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
createApp(App).use(store).mount('#app')
vue其实提供了一个devtools，方便我们对组件或者vuex进行调试：
????????我们需要安装beta版本支持vue3，目前是6.0.0 beta15；
它有两种常见的安装方式：
????????方式一：通过chrome的商店；
????????方式二：手动下载代码，编译、安装；
方式一：通过Chrome商店安装：
????????由于某些原因我们可能不能正常登录Chrome商店，所以可以选择第二种；
手动安装devtool
