【Vue 自学笔记】Vuex全局状态管理+状态更新

什么是全局状态管理？

全局状态管理是指在整个应用程序中共享数据的一种方式。这些数据可以被多个组件访问和修改，而无需通过 props 或 events 层层传递。
Vuex 可以说是 Vue.js 中最常用的 全局状态管理 方案。

Vuex如何实现全局状态管理？

• 集中式存储： Vuex 将所有组件的共享状态集中到一个 store（仓库）中，这个 store 就是整个应用的“单一数据源”。
• 状态变更的唯一来源： 只有通过 mutations 才能修改 state，这保证了 state 的可预测性。
• 异步操作处理： actions 可以处理异步操作，并通过 commit mutations 来更新 state。
• 计算属性： getters 可以从 state 中派生出新的状态，类似于 Vue 的 computed properties。

而以上内容，就跟store/index.js对应上了。

import { createStore } from 'vuex'

export default createStore({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

state全局状态

这个名词听起来高大上，但其实就是托管一些全局的变量。
比如当前路由的名称，用户所处页面只能是一个，那就用这个来代表用户当前的路由信息。

mutations： 更新 state

记得前面说过的吗，只有通过 mutations 才能修改 state。
而 mutations 就是用来定义修改 state 的方法。
在调用时，使用 store.commit()方法来配合使用，调用相关方法更新 state 的值。

vuex 小结

1. Vuex 管理的对象天然是响应式对象。
2. 需要通过方法的方式操作管理的状态。

实操

在原先代码中，使用事件传递的方式层层传递参数，最后传到 router-view才实现路由的更新，很麻烦。
学了 vuex 之后，可以试着将路由名交给 vuex 托管，咱们只需要根据全局状态中的路由名更新路由即可。

---

首先定义状态和修改状态的方法：
store/index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    name: '',
  },
  getters: {
  },
  mutations: {
    changeView(state, name){
      state.name = name
    }
  },
  actions: {
  },
  modules: {
  }
})

自定义状态名为name，意为我们当前的路由名称，默认值为空字符串。
定义的状态更新方法：根据传来的名称更新当前的路由名。

---

使用watch+computed监听全局状态中的name来更新router-view。
App.vue：

<script setup>
import router from "@/router/index.js";
import {computed, watch} from "vue";
import store from "@/store/index.js";

// 监听响应式对象的改变
const name = computed(()=>store.state.name);
watch(name, (newVal, oldVal) => {
  router.push({name: newVal})
})
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>

</style>

tip: watch 函数必须监听一个响应式的值，这是因为 watch 函数的实现依赖于Vue.js 的响应式机制。

---

点击子组件触发状态更新，store.commit()方法。
views/home.vue

<template>
  <swpier :url="url" @my-event="fromSub"></swpier>
</template>

<script setup>
import swpier from '@/components/swiper.vue'
import url from '@/assets/logo.svg'
import {ref} from "vue";
import store from "@/store/index.js";
function fromSub(event){
  store.commit('changeView', 'detail')
}
</script>

store.commit()函数接收两个参数，第一个是我们在store/index.js的mutations中定义的方法名，字符串；第二个就是我们在该方法中定义的参数，是什么类型就传入什么类型，这里的'detail'就是我们在方法里定义的第二个参数name。

---

最后就是结果展示了～
打开首页：

点击图片：

路由更新，功能实现～