最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

Vuex的使用 环球通讯

来源：博客园

1、Vuex介绍

1.1、概念

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


(资料图片仅供参考)

1.2、什么时候使用Vuex

多个组件共享同一个状态（数据）的时候。

1.3、Vuex原理图

注意：图中没有体现出来，但是VueComponent可以直接commit给Mutations。

1.4、搭建vuex环境

1、npm i vuex

如果不指定版本，会自动安装vuex4，而vuex4只能在vue3中使用，因此vue2要指定vuex3的版本。npm i vuex@3

2、main.js

import Vuex from "vuex";// 使用插件Vue.use(Vuex);

3、src下创建store文件夹，创建index.js文件。

// 该文件用于创建Vuex中最为核心的store// 引入Vueimport Vue from "vue";// 引入Vueximport Vuex from "vuex"// 应用Vuex插件Vue.use(Vuex);// 准备actions——用于响应组件中的动作const actions = {};// 准备mutations——用于操作数据（state）const mutations = {};// 准备state——用于存储数据const state = {};// 创建storeconst store = new Vuex.Store({    actions,    mutations,    state});// 暴露storeexport default store;

main.js

// 引入Vueimport Vue from "vue";// 引入Appimport App from "./App.vue";// 引入storeimport store from "./store";Vue.config.productionTip = false// 创建Vue实例对象 --- vmnew Vue({  render: h => h(App),  store,  beforeCreate() {    Vue.prototype.$bus = this; // 安装全局事件总线  },  mounted() {    console.log("vm", this);  }}).$mount("#app")

1.5、Vuex开发者工具

就是vue的开发者工具，因为vuex是vue开发者团队开发的。

2、基本使用

1、store文件夹下的index.js

// 该文件用于创建Vuex中最为核心的store// 引入Vueimport Vue from "vue";// 引入Vueximport Vuex from "vuex"// 应用Vuex插件Vue.use(Vuex);// 准备actions——用于响应组件中的动作const actions = {    // 响应组件中加的动作    jia(context, value) {        context.commit("JIA", value);    }};// 准备mutations——用于操作数据（state）const mutations = {    // 执行加，方法大写是为了和actions中的方法区别    JIA(state, value) {        state.sum += value;    }};// 准备state——用于存储数据const state = {    sum: 0};// 创建storeconst store = new Vuex.Store({    actions,    mutations,    state});// 暴露storeexport default store;

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

3、组件中修改vuex中的数据：$store.dispatch("action中的方法名", 数据) 或者 $store.commit("mutations中的方法名",数据)

备注：如果没有网络请求以及业务逻辑，组件中也可以直接越过action，也就是说不写dispatch，直接commit给mutations去操作数据。

3、配置项

3.1、getters配置项

1、当state中的数据需要经过加工之后再使用时，可以使用getters加工。

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

3、组件中读取数据：$store.getters.bigSum

index.js

......// 准备getters——用于将state中的数据进行加工，和computed属性类似const getters = {    bigSum(state) {        return state.sum + "元";    }}// 创建storeconst store = new Vuex.Store({    actions,    mutations,    state,    getters});// 暴露storeexport default store;

3.2、四个map方法的使用

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

computed: {  // 借助mapState生成计算属性：sum,school（对象写法）  ...mapState({sum: "sum", school:"school"}),    // 借助mapState生成计算属性：sum,school（数组写法）  ...mapState(["sum", "school"]),}

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

computed: {  // 借助mapState生成计算属性：sum,school（对象写法）  ...mapGetters({bigSum: "bigSum"}),    // 借助mapState生成计算属性：sum,school（数组写法）  ...mapGetters(["bigSum"]),}

3、mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数。

methods: {  // 靠mapActions生成：incrementOdd、incrementWait（对象写法）  ...mapActions({incrementOdd: "jiaOdd", incrementWait: "jixWait"});    // 靠mapActions生成：incrementOdd、incrementWait（数组形式）  ...mapActions(["jiaOdd", "jixWait"]);}

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

methods: {  // 靠mapMutations生成：increment、decrement（对象写法）  ...mapMutations({increment: "JIA", decrement: "JIAM"});    // 靠mapMutations生成：JIA、JIAM（数组形式）  ...mapMutations(["JIA", "JIAM"]);}

备注：mapActions和mapMutations使用的时候，如果需要传递参数需要：在模板中绑定事件时传递好参数，否则参数会是事件对象。

4、vuex模块化 + namespace

1、目的：让代码更好维护，让多种数据分类更加明确。

2、修改index.js

// count模块相关业务const countAbout = {  namespaced: true, // 开启命名空间  state: {},  mutations: {},  actions: {},  getters: {}}// person模块相关业务const personAbout = {  namespaced: true, // 开启命名空间  state: {},  mutations: {},  actions: {},  getters: {}}const store = new Vuex.Store({  modules: {    countAbout,    personAbout  }});

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

this.$store.state.personAbout.list...mapState("countAbout", ["sum","school","subject"]);

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

this.$store.getters["personAbout/firstName"]...mapGetters("countAbout", ["bigSum"]);

5、开启命名空间后，组件中调用dispatch

this.$store.dispatch("personAbout/addPerson", person)...mapActions("countAbout", {incrementOdd: "jiaOdd"});

6、开启命名空间后，组件中调用commit

this.$store.commit("personAbout/ADD_PERSON",person);...mapMutations("countAbout", {increment: "JIA"});

关键词：