Vuex基本使用

已于 2022-06-10 11:17:46 修改
阅读量959 收藏
点赞数
分类专栏： vue 文章标签： vue
于 2022-04-13 18:56:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39593914/article/details/124155116
版权

Vuex

一、简介

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

原理图：
请添加图片描述

安装：

//	vue2	==>	vuex3.x				vue3	==>	vue4.x
yarn add vuex@3

二、Vuex的环境搭建

1.创建文件：src/store/index.js

import Vuex from 'vuex';
import Vue from 'vue'

// actions - 响应组件中的动作       mvc中的service层
const actions = {}

// mutations - 用于操作数据(state)      mvc中的dao层
const mutations = {}

// state   -    存储数据
const state = {}


Vue.use(Vuex);	//	需要在创建store实例前调用Vue.use(Vuex)
// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

2.main.js中创建store配置项

import store from './store'

const vm = new Vue({
    render: h => h(App),
    store
});
vm.$mount('#root')

三、基本使用

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


const actions = {
    incre(context, value) { //  context 类似于mini版的Store
        context.commit('INCRE', value);
    }
}

const mutations = {
    INCRE(state, value) {
        state.total += value;
    }
}

const state = {
    total: 0
}

Vue.use(Vuex);
export default new Vuex.Store({
    actions,
    mutations,
    state
})

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

<h2>当前求和为：{{ $store.state.total }}</h2>

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

this.$store.dispatch('incre',this.operated_n);

this.$store.commit('DECRE', this.operated_n);	//若没有网络请求或其他业务逻辑，可不写dispatch，直接编写commit
//另一种提交风格
 this.$store.commit({
 type:'DECRE',
 id:'1'
 })
 // type就是提交的类型 其它为提交的参数

4.开发者工具

请添加图片描述

三、getters配置

简述：当state中的数据需要经过加工后再使用时，可以使用getters加工。

编码使用：在store.js中追加getters配置

// 用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.total*10;				// vue 中的data
    }
}

Vue.use(Vuex);
export default new Vuex.Store({				// vue computed
    ...
    getters
})

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

四、四个map方法的使用

1.mapState

用于帮助我们映射state中的数据为计算属性

编码：

import { mapState } from "vuex";


coumputed:{
    /* 原生
    he() {
        return this.$store.state.total;
    }
    */
    
    // 对象写法
    ...mapState({
        he:'total',
        n: (state) => state.n,
    })
    
    
    
    /* 原生
    total() {
        return this.$store.state.total;
    }
    */
    
    // 数组写法
    ...mapState(['total'])
}

2.mapGetters

用于帮助我们映射getters中的数据为计算属性

编码：

import { mapGetters } from "vuex";


coumputed:{
    /* 原生
     dashu() {
      return this.$store.getters.bigSum;
    },
    */
    
    // 对象写法
    ...mapGetters({
        dashu:'bigSum'
    })
    
    
    
    /* 原生
    bigSum() {
        return this.$store.getters.total;
    }
    */
    
    // 数组写法
    ...mapGetters(['bigSum'])
}

3.mapMutations

简述：生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

编码：

/* 原生
incre() {
    this.$store.commit("INCRE", this.operated_n);
}


由 ...mapMutations生成的函数，需要在函数调用时传参
incre(value) {
    this.$store.commit("INCRE", value);
}
*/

//对象写法
...mapMutations({
    incre:'INCRE'
})
// 使用 
<button @click="incre(1)">+</button>


//数组写法
...mapMutations(['INCRE'])
// 使用 
<button @click="INCRE(1)">+</button>

4.mapActions

编码：

/* 原生
jia(){
    this.$store.dispatch('incre',this.operated_n);
}


由 ...mapActions生成的函数，需要在函数调用时传参
jia(value) {
    this.$store.dispatch("incre", value);
}
*/

//对象写法
...mapActions({
    jia:'incre'
})
// 使用 
<button @click="jia(1)">+</button>


//数组写法
...mapMutations(['incre'])
// 使用 
<button @click="incre(1)">+</button>

5.辅助函数在setup中使用

在setup中使用mapState与mapGetters有变化，返回的函数使用了this，但setup中没有this，需要绑定this后，在使用computed函数包裹，当在外部使用，如用于事件的回调时，mapMutation,mapActions所返回的函数，可直接使用，不需要封装，因为不在setup函数中使用，当需要在setup中使用时，还是需要封装，改变this的指向，建议统一封装一下。
mapState、mapGetters使用：

import { useStore } from "vuex";
import { computed } from "vue";
import { mState,mGetters } from '../hooks/VuexAssist'
export default {
setup() {
  const store = useStore();

  // 从store中获取单个数据
  const sCounter = computed(() => store.state.count);

  const storeState = mState({counter:'count', n:'name'});
  const storeGetters = mGetters(['bigCount']);
  return {
    sCounter,
    ...storeState,
    ...storeGetters
  };
},

封装处理mapState在setup中使用：

import { computed } from "vue";
import { mapState, mapGetters, useStore } from "vuex";

const transformMap = (nativemap) => {
  const store = useStore();
  // 改变返回的函数的 this 指向，使其可以被调用，然后再传回computed
  for (let key in nativemap) {
    nativemap[key] = computed(nativemap[key].bind({ $store: store }));
  }
  return nativemap;
};

const mState = (mapSateInfo) => {
  const mapResult = mapState(mapSateInfo);
  return transformMap(mapResult);
};

const mGetters = (mapGettersInfo) => {
  const mapResult = mapGetters(mapGettersInfo);
  return transformMap(mapResult);
};

export { mState, mGetters };

mapMutations使用：

setup() {
const store = useStore();

const storeMutations = mapMutations(["increment"]);
const incre = () => {
    // 将函数在setup中执行，需要改变this指向
  storeMutations.increment.bind({$store: store})();
};
return {
  ...storeMutations, // 将函数在setup外执行，不需要改变this指向
  incre
};

封装工具函数：

import { computed } from "vue";
import {
  mapState,
  mapGetters,
  useStore,
  mapActions,
  mapMutations,
  createNamespacedHelpers,
} from "vuex";

const transformFn = (isWapperComputed) => {
  return (nativemap) => {
    // 用于作用mapSate、mapGetters，改变this指向，并包裹computed
    const store = useStore();
    if (isWapperComputed) {
      // state/getters需要包裹computed
      for (let key in nativemap) {
        nativemap[key] = computed(nativemap[key].bind({ $store: store }));
      }
    } else {
      // actions/mutations不需要包裹computed
      for (let key in nativemap) {
        nativemap[key] = nativemap[key].bind({ $store: store });
      }
    }
    return nativemap;
  };
};

/**
 * 
 * @param {*} mFn 需要转换的映射方法
 * @param {*} mFnName 需要转换的方法名，用于获取模块化的映射方法
 * @param {*} transformFn 返回 用于改变map返回的函数达的this指向的 方法
 * @returns 
 */
const mapperFn = (mFn, mFnName, transformFn) => {
  // 函数柯里化
  return (...args) => {
    let mapper = null;
    if (args.length === 1) {
      // 只有一个参数时，就没有模块化获取数据，直接获取rootState的数据
      mapper = args[0];
      return transformFn(mFn(mapper));
    }
    if (args.length === 2) {
      // 获取模块名称 映射信息
      const module = args[0];
      mapper = args[1];
      if (typeof module === "string" && module.length > 0) {
        // 判断模块名称是否存在
        mFn = createNamespacedHelpers(module)[mFnName];
        const mapResult = mFn(mapper);
        return transformFn(mapResult);
      } else {
        throw new Error("first argument must be a string and not empty");
      }
    }
    throw new Error("useSate must be called with one or two arguments");
  };
};
const useState = mapperFn(mapState, "mapState", transformFn(true));
const useGetters = mapperFn(mapGetters, "mapGetters", transformFn(true));
const useMutations = mapperFn(mapMutations, "mapMutations", transformFn(false));
const useActions = mapperFn(mapActions, "mapActions", transformFn(false));

export { useState, useGetters, useMutations, useActions };

五、Vuex模块化+命名空间

简述：让多种数据分裂明确，代码更容易维护

修改store.js

import Vuex from 'vuex';
import Vue from 'vue';

// Count组件相关数据
const countOptions = {
    namespaced:true,        // 如果不起开，不能使用mapState等简写方式映射，只能this.$store.count.total
    actions:{...},
    mutations:{...},
    state:{...},
    getters:{...}
}

// Person组件相关数据
const personOptions = {
    namespaced:true,
    actions:{...},
    mutations:{...},
    state:{
        personList: [
            { id: "001", name: "六七", age: 19 },
            { id: "002", name: "十三", age: 23 },
            { id: "003", name: "五四", age: 18 }
        ]
    },
    getters:{...}
}


Vue.use(Vuex);
export default new Vuex.Store({
    modules:{
        person:personOptions,
        count:countOptions
    }
})

1. 读取state

//方式一：自己直接读取
this.$store.state.personAbout.list;

//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject'])	// 前一个参数标识模块名称

2.读取getters

//方式一：
this.$store.getters['person/fitstPersonName'];		// 写原生的，除了state，都是 ['person/fitstPersonName'] 形式获取

//方式二：借助mapGetters读取：
...mapGetters('person',['fitstPersonName'])

3.调用dispatch

//方式一：自己直接dispatch
this.$store.dispatch('count/incre',person)

//方式二：借助mapActions：
...mapActions('count',['incre'])

4.调用commit

//方式一：自己直接commit
 this.$store.commit('person/ADDPERSON',personObj);

//方式二：借助mapMutations：
...mapMutations('person',['ADDPERSON']),

5.使用createNamespacedHelpers

获取某个模块的mapState、mapGetters、mapActions、mapMutations

<script>
import { createNamespacedHelpers } from "vuex";

const { mapState: home_mapState,mapMutations,mapGetters,mapActions } = createNamespacedHelpers("home");
export default {
  computed: {
    ...home_mapState(["homeCounter"]),
  },
};
</script>
@jiangxiao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VueX基本使用
qq_45954781的博客
03-09 283
VueX基本使用 安装 npm install vuex@3.6.2 --save 创建store文件夹和index.js文件 import Vue from "vue" import VueX from "vuex" Vue.use(VueX) export default new VueX.Store({ state: { showPanel: { passShow: false, loginShow: false, registShow: false
vuex 基本使用
m0_68331234的博客
05-24 881
Vuex 是 vue 项目中实现大范围数据共享的技术方案。 作用:能够方便、高效地实现组件之间的数据共享 使用 Vuex 的好处 ： 1 数据的存取一步到位，不需层层传递 2 数据的流动非常清晰 3 存储在Vuex中的数据都是响应式的 起步 在项目中安装和配置 Vuex 安装 Vuex 的依赖包 运行如下的 npm 命令，在把 Vuex 安装为项目的依赖包: nmp i vuex@3.6.2 yarn add vuex@3.6.2 封装 Store 模块 主要的实现步骤如下: 1
vuex仓库的五大属性、辅助函数与使用方法，史上最详细！
共同学习，共同成长
06-05 1825
Vuex是Vue.js的状态管理库，它通过中心化的状态管理使得组件间的数据共享更加容易。Vuex包含五个核心属性:state、getters、mutations、actions和modules。今天我们将详细讲解这五大属性的使用方法与辅助函数，并结合具体代码让小伙伴们深入理解 ，彻底掌握！
vuex基本使用
qq_53241930的博客
08-10 427
Actions：提交更改数据的方法（同步），通过dispatch触发，不能直接修改state，首先在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值。当我们构建一个中大型的单页面应用程序时，Vuex可以更好的帮助我们在组件外部统一管理状态。Mutations：提交更改数据的方法（同步），通过commit触发。Getters：从基本数据派生出来的数据。State：基本数据，数据存放地。5、修改state中的数据。.
vuex基本使用方法
stella_stella123的博客
09-11 179
Vuex允许Store分成不同模块，每个模块都拥有自己的state，getter，mutation，action。Action处理的是异步任务，异步任务必须通过Action触发Mutation方法改变状态，不能直接使用Mutation直接对异步任务进行修改。Getter类似于计算属性，数据来源于Vuex中的State，Vuex中的数据需要简单包装处理由计算属性Getter来完成。store中的状态不能直接进行操作，我们使用mutation对store中的状态进行修改，便于监听数据的变化。
简单的vuex 的使用案例笔记
08-27
一、Vuex 的基本概念 Vuex 是一个状态管理模式，用于管理应用程序的状态。它可以将应用程序的状态集中管理，方便地处理复杂的应用程序逻辑。 二、Vuex 的使用步骤 1. 安装 Vuex 使用 npm 安装 Vuex，命令为 `npm...
Vuex新手的理解与使用详解
10-16
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。...对于初学者来说，理解Vuex的基本概念和使用方法，是提升Vue开发效率的关键步骤。通过实践，你可以更好地掌握如何在大型项目中利用Vuex解决状态管理的问题。
vuex的基本介绍和使用—-逆战班
01-20
然而，对于小型应用或不打算构建复杂单页应用的情况，过度使用 Vuex 可能会导致代码过于复杂和冗余，因此应谨慎决定。 Vuex 的工作原理基于单向数据流，状态管理分为同步状态和异步状态。在 Vue 的官方调试工具 ...
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
07-26
大学生挑战杯-喜树根器官培养和抗癌物质喜树碱生成的研究.rar
b278视频及游戏管理平台-springboot+vue.zip（可运行源码+sql文件+）
07-26
视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。 视频及游戏管理平台是一个很好的项目，结合了后端（Spring Boot）和前端（Vue.js）技术，实现了前后端分离。
大模型应用-为Ollma开发的简单的HTML网页UI应用-附项目源码-优质项目实战.zip
07-26
大模型应用_为Ollma开发的简单的HTML网页UI应用_附项目源码_优质项目实战
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
07-26
基于JAVA局域网监听软件的设计与开发(源代码+论文).rar
小程序-光影娱乐带后台（源码）.zip
07-26
小程序-光影娱乐带后台（源码）.zip
基于Cadence的模块化电路设计与应用研究
07-26
在当前电子产品的需求不断扩大尧更新频率持续加快的形势下袁电路模块化设计成为了提高电子产 品设计效率尧最大化降低研制成本极其重要且有效的实施途径遥通过对模块化电路设计流程进行分析袁系统地 梳理出了Cadence软件下模块化电路设计的实现方式袁以及基于Capture CIS 的模块化电路调用方法袁为广大设 计师开展产品模块化电路设计提供了方法参考遥
基于人工蜂群优化算法ABC-Kmean-Transformer-GRU实现数据回归预测算法研究Matlab代码.rar
最新发布
07-26
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
基于JavaWeb的blog博客发布系统（源代码+数据库sql）.rar
07-26
基于JavaWeb的blog博客发布系统（源代码+数据库sql）.rar
小程序-智能用电.zip
07-26
小程序-智能用电.zip
Vue3从入门到实战 vuex基本使用
05-21
下面是Vue3和Vuex的基本使用方法： 1. 在项目中安装Vue3和Vuex： ```bash npm install vue@next vuex@next --save ``` 2. 创建一个store.js文件用于配置Vuex： ```javascript import { createStore } from 'vuex...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值