vue状态管理——Vuex

 vuex官方解释

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单理解 

 vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。

什么时候我们该使用它？

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

 使用

1、 安装Vex 

npm install --save vuex

2、配置Vuex文件

新建文件夹 store 新建文件 index.js ，在index.js文件进行配置vuex文件——相当于数据库，只不过是在前端。所有状态（数据都放在state中）比如：counter就相当于数据库的一个字段，0就是字段值。

import { createStore } from "vuex";
// const store = createStore({
// })
// export default store;
//或者简写如下
export default createStore({
    state:{
        counter:0
    }
})

3、在全局进行引入，在main.js文件添加以下代码，重点是引入和挂载。

import store from './store' 
const app = createApp(App);
app.use(store)
app.mount('#app')

4、在组件中读取状态，在任意一个组件页面中使用，都可以获取到存储在state下的值

第一种

 <p> counter = {
  {$store.state.counter}} </p>

 第二种 在任意一个组件页面中使用以下代码，只不过是放在了computed下，computed专门读取vuex的数据。

<template>
  <p>{
  { counter }}</p>
</template>

<script>
import { mapState } from "vuex"
export default {
  computed:{
    //专门读取vuex的数据
    //如有多个 则： ...mapState(["counter"，“age"])
    ...mapState(["count