vue学习六：状态管理VueX

标准单向数据流（Vuex 核心设计原则：单向数据流，保证可追踪）

用户操作触发 → 组件分发动作 Vue 组件（页面）响应用户操作（如点击按钮、页面加载），通过 Dispatch（分发） 调用 Actions（动作）。

例：用户点击「获取用户信息」按钮，组件 dispatch 一个 getUserInfo action。
Actions 处理异步 → 提交变更 Actions 接收分发的任务，在这里处理所有异步逻辑 （比如调用 Backend API（后端接口） 请求数据、处理复杂计算），处理完成后，通过 Commit（提交） 触发 Mutations（变更）。

例：getUserInfo action 调用后端接口拿到用户数据，然后 commit 一个 setUserInfo mutation。
Mutations 同步修改 → 更新状态 Mutations 是唯一能直接修改 State 的入口 ，必须是同步函数，在这里对 State（状态） 执行 Mutate（修改） 操作，更新全局数据。

例：setUserInfo mutation 把接口返回的用户数据写入 State。
状态更新 → 组件重新渲染 State 数据发生变化后，通过 Render（渲染） 自动触发依赖该数据的 Vue 组件重新渲染，页面展示最新数据。
调试工具实时追踪 Devtools（开发者工具） 会实时监听所有 Mutations 的执行，记录每一次 State 的变化，支持回溯、时间旅行调试，方便排查问题。

简单来说vuex的作用：

每一个 Vuex 应用的核心都是一个 store，与普通的全局对象不同的是，基于 Vue 数据与视图绑定的特点，当 store 中的状态发生变化时，与之绑定的视图也会被重新渲染。
store 中的状态不允许被直接修改，改变 store 中的状态的唯一途径就是显式地提交（commit）mutation，这可以让我们方便地跟踪每一个状态的变化。
在大型复杂应用中，如果无法有效地跟踪到状态的变化，将会对理解和维护代码带来极大的困扰。

state：相当于声明一个变量，存值等等

mutations：基于vuex的理念，数据的更改要集中在mutations中而非直接修改state。通过increment（）方法来修改state的数据，在methods中先定义increment的方法逻辑，this自动引入对应state，commit来传输名为increment的方法名，从而自动调用方法。

mutations包括载荷功能，即commit提交还可以包含多个参数，此处可用于辅助计算

getter：用于维护state的派生状态，随state变化而变化。

比如此时state模拟备忘录，用来存储将要做的事。getter用来补充，记录已做的事情。利用donetodos方法通过过滤器将state中的数据都变为已做的数据

action： 通过commit提交操作来提交mutations从而修改state，以此记录state的变化。action可进行异步操作。

创建一个简单示例：

index.js: store的定义与初始化

复制代码

import { createStore } from 'vuex'

// 创建一个新的 store 实例
const store = createStore({
  state () {
    return {
      count: 0 //定义初始状态的属性
    }
  },
  mutations: {
    increment (state) {  //定义了increment方法
      state.count++  //实现方法内容，修改属性
    }
  }
})

export default store  //导出store实例，供主应用引入

main.js：将store组件导入到每个子组件中，可直接用$store访问

复制代码

import { createApp } from 'vue'
import App from './App.vue'
import store from './store' //导入store实例

const app = createApp(App)
app.use(store)  //vue将store实例注入到每个子组件中，使得组件可以通过$store访问它
app.mount('#app')

**helloworld.vue：**调用展示store的count属性，实现修改逻辑

复制代码

<template>
  <div class="hello">
   {{ $store.state.count }}
   <button @click="add">+1</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    add() {
      this.$store.commit('increment') //调用commit来修改状态，使用increment方法
    }
  }
}
</script>

计算属性：computed

当state变化时，计算属性会自动同步变化的属性，此时的自定义方法count中需要添加this来指向组件实例。在template中vue会自动为未限定标记符添加this，而在script的js环境中，js引擎无法在当前作用域找到名为$store的变量

也可以用mapState简化操作，当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

关于mapstate的补充使用，在vuex官网可以查询：

引入getter列子进入index.js：多个对象利用嵌套语法{}来嵌套内对象，mapGetters同mapState类似。todos记录另一个state，getters创建过滤后的state：doneTodos

结果：

可以在组件中使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

复制代码

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

例子如下：其中载荷的参数n需要放在template标签中

上述辅助函数实际相当于vuex自动生成如下方法，所以payload这块的参数需添加在button标签中

关于异步操作的知识补充：

异步操作常作用于从服务器端获取数据，由于网络限制，数据下载到用户端需要时间，在这期间所执行的从服务器获取资源的操作称为异步操作，因为无法完成同步操作让用户停留在卡顿的网页无法执行任何操作。

最简单的举例：

同步操作：

异步操作：

vuex中mutations用于同步操作，完成commit提交。actions负责异步操作，由dispatch完成分发操作

作为例子数据写死在了state中

模拟从后端获取数据，利用action的分发操作，调用后端api接口得到数据，再利用commit方法同步提交得到的数据，修改state。

在使用的组件中利用mapAction调用

概念	简单理解	补充/修正
State	保存数据	✅ 单一数据源。它是响应式的，任何组件读取它都能自动更新视图。建议只存"最小集"数据，衍生数据交给 Getters。
Mutations	更改数据	✅ 唯一能修改 State 的地方。关键限制：必须是同步的。不能包含 API 请求、`setTimeout` 等异步操作。这是为了保证 DevTools 能准确追踪每一次状态变化。
Getters	过滤数据	✅ Store 的计算属性。类似于 Vue 组件中的 computed。当依赖的数据（State）变化时，Getters 会自动重新计算。适合做过滤、排序、统计等逻辑。
Actions	异步处理	✅ 处理异步逻辑。它不直接修改 State，而是通过提交 (commit) Mutations 来间接修改 State。

关于module此处直接引用官网的官方解释：