一、介绍

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

      简单来说，Vuex是一个数据管理框架，创建了一个全局唯一的仓库，用来存放全局的数据。

二、作用

1、Vuex能够保存全局数据（数据仓库），供整个应用使用

2、Vuex保存的数据是响应式的

3、Vuex保存的数据可以跟踪状态的变化

三、核心概念

1、state：放的是全局的数据，定义数据。

2、getters：可以认为是 store 的计算属性。

3、mutations：更改 Vuex 的 store 中的状态的唯一方法。

       Vuex中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。

       注：mutations里面只允许写同步代码，不允许写异步代码

4、actions： Action 类似于mutation。不同在于：Action 提交的是 mutation，而不是直接变更状态；Action 可以包含任意异步操作。

5、modules：将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

四、使用

1、安装vuex：

npm install vuex --save

2、main.js入口文件

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// use(store)：使用vuex提供的仓库store
createApp(App).use(store).use(router).mount('#app')

3、使用vuex

views -> About.vue文件
<template>
  <div>
    <button @click="handleClick">点击变更</button>
    <h1>{{ myName }}</h1>
  </div>
</template>

<script>
export default {
  name: "About",
  computed: {
    myName() {
      return this.$store.state.name;
    },
  },
  methods: {
    handleClick() {
      // 想改变数据，vuex要求第一步，必须派发一个action，此处的change就是一个action
      // dispatch()就是派发，有两个参数dispatch('派发的action的名字','可以传递一个参数')
      // dispatch('change')就表示要派发一个change的action，告诉store要做修改
      this.$store.dispatch("change", "2s后变更新名字");
    },
  },
};
</script>

store -> index.js文件
import { createStore } from 'vuex'

// VueX数据管理框架
// VueX创建了一个全局唯一的仓库，用来存放全局的数据
export default createStore({
  state: {//state内放的是全局的数据，定义数据
    name:'初始名字'
  },
  // mutations里面只允许写同步代码，不允许写异步代码
  mutations: {
    // 修改数据第四步：commit提交的叫做change的mutation被执行；其中data为commit触发的入参
    change(state, data){
      // 第五步：在mutation里面修改数据
      state.name=data;
    }
  },
  actions: {
    // 修改数据，第二步，store感知到触发了一个叫做change的action，执行change方法；其中payload为dispatch派发的入参
    change({ commit }, payload){
      // 第三步：提交一个commit，触发一个mutation
      // commit('change', payload);//立即触发
      // 2s后触发
      setTimeout(()=>{
        commit('change', payload);
      },2000)
    }
  },
  modules: {
  }
})

五、总结

       dispatch方法与action做关联，commit方法与mutations做关联。