Vue3（撩课学院）（完结）笔记10-vuex4简介，继承，获取和共享状态，多页面共享，修改共享状态，异步状态，改进用法，模块分割

1、vuex4简介

全局状态管理
可以使用组合式API（compose API）
单向数据流理念

vuex把组件共享状态抽取出来，以一个全局单例模式管理，在这种模式下，项目中的组件树构成了一个巨大的‘视图’，不管在树的哪个位置，任何组件都能够获取状态或触发行为。

vuex是什么
vuex是专为vue.js应用程序开发的状态管理模式，她采用集中式存储管理应用的所有组件的状态，并以响应的规则保证状态以一种可预测的方式发生变化

一句话表述：

vuex相当于一个数据银行，对vue应用中多个组件的共享状态进行集中式的管理（读/写）
但是，如果不打算开发大型单页应用，使用vuex可能是繁琐荣誉的 大型SPA（单页面应用）项目存在多个状态在多个界面共享的问题

2、vuex4集成

vuex的组成部分
state
getters
mutations
actions
mapState
mapActions
mapMutations
Modules

3、vuex4获取和共享状态

先安装vuex4

npm install vuex@next --save

创建src/store/index.js
index.js

//1引入stroe
import {
   createStore} from 'vuex'

//2、创建一个store对象
const store=createStore({
   
  //全局共享状态（数据）存放
  state:{
   
    counter:0
  },
  getters:{
   

  },
  //同步提交状态
  mutations:{
   

  },
  //提交操作（可以是同步也可以是异步）给mutations
  actions:{
   

  }
})

//3、导出
export default store

main.js中引入这个index.js
main.js

import {
    createApp } from 'vue'
import App from './App.vue'
import store from './store/index.js'

const app=createApp(App);
//使用vuex的store
app.use(store)
app.mount('#app')

app.vue

<template>
  <div>
    <h3>首页的状态：{
   {
   $store.state.counter}}</h3>
    <hello-world></hello-world>
  </div>
</template>

<script >
export  default {
   
  components:{
   
    HelloWorld
  },
  setup(){
   

  }
}
</script>

<style>

</style>

4、vuex4数据多页面共享

src/store/index.js

//1引入stroe
import {
   createStore} from 'vuex'

//2、创建一个store对象
const store=createStore({
   
  //全局共享状态（数据）存放
  state:{
   
    counter:0
  },
  getters:{
   

  },
  //同步提交状态
  mutations:{
   

  },
  //提交操作（可以是同步也可以是异步）给mutations
  actions:{
   

  }
})

//3、导出
export default store

main.js

import {
    createApp } from 'vue'
import App from './App.vue'
import store from './store/index.js'

const app