Vue 5 - 状态管理(Vuex)

---

本文内容来自：https://www.bilibili.com/video/BV1Rs4y127j8/

---

Vue状态管理(Vuex)

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kGBHukp4-1689761861707)(imgs/image-20220530160016169.png)]

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

简单来说，状态管理可以理解成为了更方便的管理组件之间的数据交互，提供了一个集中式的管理方案，任何组件都可以按照指定的方式进行读取和改变数据

---

引入Vuex的步骤

第一步：安装Vuex

npm install --save vuex

---

第二步：配置Vuex文件

import { createStore } from 'vuex'

export default createStore({
  state: {
      counter:0
  }
})

---

第三步：在主文件中引入Vuex

import store from './store'
app.use(store)

---

第四步：在组件中读取状态

counter:{{ $store.state.counter }}
// 或者
import { mapState } from 'vuex';
computed:{
    ...mapState(["counter"])
}

---

Vue状态管理核心(Vuex)

最常用的核心概念包含: State、Getter、Mutation、Action

---

Getter

对Vuex中的数据进行过滤

import { createStore } from 'vuex'

export default createStore({
  state: {
    counter: 0
  },
  getters: {
    getCount(state){
      return state.counter > 0 ? state.counter : "counter小于0，不符合要求"
    }
  }
})

---

import { mapState,mapGetters } from 'vuex';
computed:{
    ...mapGetters(["getCount"])
}

---

Mutation

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

import { createStore } from 'vuex'

export default createStore({
  state: {
    counter: 0
  },
  getters: {
  },
  mutations: {
    setCounter(state, num) {
      state.counter += num
    }
  }
})

---

import { mapState,mapMutations } from 'vuex';

methods:{
    ...mapMutations(["setCounter"]),
    clickHandler(){
      // this.$store.commit("setCounter",20)
	  // 或者
      // this.setCounter(10)
    }
}

---

Action

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态
• Action 可以包含任意异步操作

import { createStore } from 'vuex'
import axios from "axios"

export default createStore({
  state: {
    counter: 0
  },
  getters: {
    getCount(state){
      return state.counter > 0 ? state.counter : "counter小于0，不符合要求"
    }
  },
  mutations: {
    setCounter(state, num) {
      state.counter += num
    }
  },
  actions: {
    asyncSetCount({ commit }){
      axios.get("http://iwenwiki.com/api/generator/list.php")
      .then(res =>{
        commit("setCounter",res.data[0])
      })
    }
  }
})

---

import { mapState,mapMutations,mapGetters,mapActions } from 'vuex';

methods:{
    ...mapActions(["asyncSetCount"]),
    clickAsyncHandler(){
        // this.$store.dispatch("asyncSetCount")
        // 或者
        // this.asyncSetCount()
    }
}

---

2023-07-19