Vuex是什么?

  • 概念:

在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件间通信的方式,且适用于任意组件

  • 何时使用?
  1. 多个组件依赖于同一状态
  2. 来自不同组件的行为需要变更同一状态

Vuex工作原理图:

vuex.png

搭建Vuex环境:

Vue2只能安装使用Vuex3版本的

Vue3只能安装使用Vuex4版本的

  • 安装:

npm i vuex@3

  • 创建文件:src/store/index.js
// 该文件用于创建vuex中最为核心的store
// 引入vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

// 准备actions -- 用于响应组件中的动作
const actions = {};
// 准备mutations -- 用于操作数据
const mutations = {};
// 准备state -- 用于存储数据
const state = {};

// 创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state,
});
  • main.js:
// 引入store
import store from "./store/index";

new Vue({
  render: (h) => h(App),
  store,
}).$mount("#app");

基本使用:

1、初始化数据、配置actions、mutations、操作store.js

  • index.js:
//该文件用于创建vuex中最为核心的store
// 引入vuex
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
// 准备actions-用于响应组件中的动作
const actions = {
  jiaOdd(context, value) {
    if (context.state.sum % 2) {
      context.commit("JIA", value);
    }
  },
  jiaWait(context, value) {
    setTimeout(() => {
      context.commit("JIA", value);
    }, 500);
  },
};
// 准备mutations-用于操作数据
const mutations = {
  JIA(state, value) {
    console.log("mutations中的jia被调用了", state, value);
    state.sum += value;
  },
  JIAN(state, value) {
    state.sum -= value;
  },
};
// 准备state-用于存储数据
const state = {
  sum: 0, //当前的和
};

// 创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state,
});
  • Count.vue:
<template>
  <div>
    <h2>当前求和为: {{ $store.state.sum }}</h2>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1, //用户选择的数字
    };
  },
  methods: {
    increment() {
      this.$store.commit("JIA", this.n);
    },
    decrement() {
      this.$store.commit("JIAN", this.n);
    },
    incrementOdd() {
      this.$store.dispatch("jiaOdd", this.n);
    },
    incrementWait() {
      this.$store.dispatch("jiaWait", this.n);
    },
  },
};
</script>

<style></style>

2、组件中读取vuex中的数据:$store.state.sum

3、组件中修改vuex中的数据:$store.dispatch('actions中的方法名',数据)或$store.commit('mutations中的方法',数据)

备注:若没有网络请求或其他业务,组件中也可以越过actions,即不写dispatch,直接编写commit

getters的使用:

1.概念:当state中的数据需要经过加工后再使用时,可以使用getters加工

2.在store.js中追加getters配置

const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}
//创建并暴露store
export default new Vuex.store({
    ...
    getters
})

3.组件中读取数据:

$store.getters.bigSum

四个map方法:

引入:

import {mapState,mapGetters} from 'vuex'

1、mapState方法:用于帮助我们映射state中的数据为计算属性

computed: {
// 借助mapState生成计算属性,从state中读取数据(数组写法)
 ...mapState(["sum", "school", "subject"]),
// 借助mapState生成计算属性,从state中读取数据(对象写法)
...mapState({ sum: "sum", school: "school", subject: "subject" }),
}

2、mapGetters方法:用于帮助我们映射getters中的数据为计算属性

computed: {
    // 借助mapGetters生成计算属性,从Getters中读取数据(对象写法)
    ...mapGetters({ bigSum: "bigSum" }),
    //借助mapGetters生成计算属性,从Getters中读取数据(数组写法)
    ...mapGetters(["bigSum"]),
}

3、mapActions方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

methods: {
    //靠mapActions生成:incrementOdd、incrementWait(对象写法)
...mapActions({ incrementOdd: "jiaOdd", incrementWait: "jiaWait" }),
    //靠mapActions生成:incrementOdd、incrementWait(数组写法)
...mapActions(['jiaOdd','jiaWait'])
}

4.mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数

methods: {
    //靠mapMutations生成:increment、decrement(对象写法)
...mapMutations({ increment: "JIA", decrement: "JIAN" }),
    //靠mapMutations生成:JIA、JIAN(数组写法)
...mapMutation(['JIA','JIAN'])   
}

模块化+命名空间:

1.目的:让代码更好维护,让多种数据分类更加明确

2.修改store.js:

const countAbout = {
    namespaced:true,//开启命名空间
    state:{x:1},
    mutations:{...},
    actions:{...},
    getters:{
        bigSum(state) {
            return state.sum * 10
        }
    }
}

const personAbout = {
    namespaced:true,//开启命名空间
    state:{...},
    mutations:{...},
    actions:{...}
}

const store = new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
})

3.开启命名空间后,组件中读取state数据

//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取
...mapState('countAbout',['sum','school','subject'])

4.开启命名空间后,组件中读取getters数据

//方式一:自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取
...mapGetters('countAbout',['bigSum'])

5.开启命名空间后,组件中调用dispatch

//方式一:直接自己读取
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWiat:'jiaWait'})

6.开启命名空间后,组件中调用commit

//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'})
最后修改:2023 年 04 月 18 日 10 : 32 AM
如果觉得我的文章对你有用,请随意赞赏