【Vue】Vuex状态管理的使用（Vue3和Vue2）的区别

写在前面

commit和dispatch的区别

• commit调用的事件来自mutations，dispatch调用的事件来自actions
• commit是阻塞调用，dispatch是异步调用
• mutations是唯一修改值的地方，actions中事件中引用的事件均来自mutations的事件

vuex状态管理的扩展

• 使用promise等异步操作必须在actions中，mutation中不允许异步操作
• actions比mutation多一层，可以进行异步的操作

Vue3

配置

目录：src/store/index.js

import { createStore } from "vuex";

// 创建一个store实例
const store = createStore({
  state() {
    return {
      name: "wzy",
    };
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload;
    },
  },
  actions: {
    asyncUpdateName(ctx, payload) {
      // ctx就是context
      ctx.commit("updateName", payload);
    },
  },
});
export default store;

引用

目录：src/main.js

import store from "./store";
import router from "./router";
import { createApp } from "vue";
import App from "./App.vue";

const app = createApp(App);
app
  .use(router)
  .use(store)//这里
  .mount("#app");

使用

<script setup>
import { useStore } from 'vuex';

const store = useStore()
// store.commit('updateName', 123)
store.dispatch('asyncUpdateName', 456)
console.log(store.state);
</script>

Vue2

配置

目录：src/store/index.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

//公共state对象，存储所有组件的状态
const state = {
  user: {
    name: "",
  },
};

// 取值的方法
const getters = {
  getUser(state) {
    return state.user;
  },
};

// 唯一可以修改state值的方法，同步阻塞
// 使用commit调用
const mutations = {
  updateUser(state, user) {
    state.user = user;
  },
};
// 异步修改，
// 使用dispatch调用
const actions = {
  asyncUpdateUser(ctx, user) {
    ctx.commit("updateUser", user);
  },
};
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
});

引用

目录：src/main.js

import Vue from 'vue'
import Vuex from 'vuex'
import store from './store'
//
//省略部分
//

Vue.use(Vuex)

new Vue({
	el:'#app',
	router,
	store,//这里
	render:h=>h(App)
})

使用

<template>
	<div>{{$store.getters.getUser.name}}</div>
</template>
<script>
//...
method:{
	init(){
	//这里的作用是演示修改，通过事件修改状态的值
		this.$store.commit('updateUser',{name:123})
		this.$store.dispatch('asyncUpdateUser',{name:123})
	}
}
//...
</script>

单一状态树

Vuex使用单一状态树

• 用一个对象就包含了全部的应用层级的状态
• 采用的是SSOT，Single Source of Truth，也可以翻译成单一数据源
• 每个应用将仅仅包含一个store实例
• 单状态树和模块化并不冲突

多状态取值的问题——mapState

• 在同一组件中，可能遇到需要调用多个state中的值，这是需要用到vuex中的方法——mapState
• mapState()接收的是一个数组，返回的是一个对象

Vue2

<script>
import { mapState } from 'vuex';

export default {
    computed: {
        ...mapState([
            'name',
            'gender'
        ])
    },
};
</script>

Vue3

vue3 若使用mapState()需要简单封装，放在文尾

<script setup>
import { useStore } from 'vuex';

const store = useStore()
const name = computed(() => {
    return store.state.name
})
</script>

mapState的hooks封装

封装

目录：src/hooks/useState.js

// useState.js
import { useStore, mapState } from "vuex";
import { computed } from "vue";

export default function (mapper) {
  // 获取key,并判断是否存在
  const store = useStore();

  // 获取相应的对象 : {name:function,gender:function}
  const storeStateFns = mapState(mapper);

  // 进行 $store 指向 ，并赋值
  const storeState = {};
  Object.keys(storeStateFns).forEach((Fnkey) => {
    // setup中无this指向
    // 在computed中计算state时需要  $store 指向 ,所以使用bind() 绑定 $store
    const fn = storeStateFns[Fnkey].bind({ $store: store });
    storeState[Fnkey] = computed(fn);
  });

  //返回
  return storeState;
}

使用

传入数组

<script setup>
import useState from '@/hooks/useState'
//传入数组
const person = useState(['name', 'gender'])
//返回值是对象
console.log(person.name.value);//yyy
</script>

传入对象

<script setup>
import useState from '@/hooks/useState'
//传入数组
const person = useState(['name', 'gender'])
//返回值是对象
console.log(person.name.value);//如下图
</script>