• 服务器返回的数据、缓存数据、用户操作产生的数据等
• UI 状态，比如元素是否被选中、是否显示加载动效等
• 这些状态通常需要在多个组件之间共享

• state：即存储数据的地方，所有组件都可以访问和使用 store 中的状态。
• getters：可以理解为 store 中的计算属性，用于从 store 中的 state 中派生一些状态。 
• mutations：用于同步修改 store 中的状态，必须是同步函数。 
• actions：用于异步提交 mutations，可以包含任意异步操作。 
• modules：用于将 store 分割成多个模块，每个模块可以维护自己的 state、getter、mutation、 action. 

• （1）在 State 中定义全局状态。
• （2）在 Vue Components 组件树中使用 State 定义的状态。
• （3）组件通过 Dispatch 分发 Actions（也可直接通过 Commit 提交到 Mutations）。
• （4）Actions 支持编写异步逻辑，可将异步请求的数据提交到 Mutations 中。
• （5）Mutations 以同步的方式修改 State 状态。

二、安装配置

1，安装 Vuex

npm install vuex@4 --save

npm install vuex@next --save

2，创建 Store

import { createStore } from 'vuex'

// 创建 store 对象
const store = createStore({
  // 定义全局共享的状态
  state() {
    return {
      counter: 0
    }
  }
})

export default store

3，挂载到 Vue 实例

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'
const app = createApp(App)
// 安装 Vuex 插件
app.use(store)
app.mount('#app')

三、基本使用

1，读取状态

<template>
  <div>
    当前计数: {{ $store.state.counter }}
  </div>
</template>

2，修改状态

import { createStore } from 'vuex'

const store = createStore({
  // 1. 定义全局共享的状态
  state() {
    return {
      counter: 0
    }
  },
  // 2. 在 mutations 中修改全局状态
  mutations: {
    // 定义 increment 函数，参数 state 是 state() 函数返回的对象
    increment(state) {
      state.counter++
    },
    decrement(state) {
      state.counter--
    }
  }
})

export default store

<template>
  <div>当前计数: {{ $store.state.counter }}</div>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
</template>

<script>
export default {
  name: 'App',
  methods: {
    increment() {
      // Options API 语法：通过 this.$store.commit 触发 mutations
      this.$store.commit('increment')
    },
    decrement() {
      this.$store.commit('decrement')
    }
  }
}
</script>

4，使用 Composition API

<template>
  <div>当前计数: {{ $store.state.counter }}</div>
  <button @click="increment">+1</button>
  <button @click="decrement">-1</button>
</template>

<script>
import { useStore } from 'vuex'

export default {
  name: 'App',
  setup() {
    // 获取全局 store 对象
    const store = useStore()

    const increment = () => {
      // Composition API 语法：通过 store.commit 触发 mutations
      store.commit('increment')
    }

    const decrement = () => {
      store.commit('decrement')
    }

    return {
      increment,
      decrement
    }
  }
}
</script>

附一：Vue.js devtools 插件安装

1，插件介绍

2，插件使用