vue——vuex

最新推荐文章于 2022-12-29 16:43:25 发布
最新推荐文章于 2022-12-29 16:43:25 发布
阅读量190 收藏
点赞数
分类专栏： es6 javascript Vue 文章标签： vue.js javascript node.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h_jQuery/article/details/120033519
版权
javascript 同时被 3 个专栏收录
123 篇文章 0 订阅
订阅专栏
Vue
86 篇文章 0 订阅
订阅专栏
es6
73 篇文章 0 订阅
订阅专栏

Vuex

vuex是什么？

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

2.Github地址：https://github.com/vuejs/vuex

什么时候使用vuex？

1.多个组件依赖于同一状态

2.来自不同组件的行为需要变更同一状态

先执行import，再执行其他的代码

main.js

import Vue from 'vue'
import App from './App.vue'
//store的s不能大写
import store from "./store"

// 关闭vue的生产提示
Vue.config.productionTip = false;
new Vue({
    store,
    render: h => h(App),
}).$mount('#app')

store/index.js

// store
// 引入vuex、vue
import Vuex from 'vuex'
import Vue from 'vue'

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

};
Vue.use(Vuex);
// 创建并导出vuex
export default new Vuex.Store({
    actions,
    mutations,
    state
})
VUEX的基本使用

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

求和案例：

vue文件

<template>
  <div>
    <h2>当前的和为:{{ $store.state.sum }}</h2>
    <!-- v-model.number双向绑定的是number类型的 -->
    <select v-model.number="num">
      <!-- value="1"中的1是字符串类型，:value="1"中的1是number类型 -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addOdd">当前和为奇数再加</button>
    <button @click="addWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: 1, //选择的数字
    };
  },
  methods: {
    add() {
      //   this.$store.dispatch("addNum", this.num);
      this.$store.commit("ADDNUM", this.num);
    },
    sub() {
      //   this.$store.dispatch("subNum", this.num);
      this.$store.commit("SUBNUM", this.num);
    },
    addOdd() {
      this.$store.dispatch("OddNum", this.num);
    },
    addWait() {
      this.$store.dispatch("delay", this.num);
    },
  },
};
</script>

<style>
</style>

store/index.js

// store
// 引入vuex、vue
import Vuex from 'vuex'
import Vue from 'vue'
// 使用vuex
Vue.use(Vuex);

// 准备actions——用于响应组件中的动作
const actions = {
    // 加减这两个操作无需放在actions里面，多余的
    /* // 加
    addNum(context, val) {
        // console.log(context);
        // console.log(val);
        context.commit('ADDNUM', val)
    },
    // 减
    subNum(context, val) {
        context.commit('SUBNUM', val)
    }, */
    // 奇数时减
    OddNum(context, val) {
        if (context.state.sum % 2) {
            context.commit('ADDNUM', val)
        }
    },
    // 延时操作
    delay(context, val) {
        setTimeout(() => {
            context.commit('ADDNUM', val)
        }, 500);
    }
};
// 准备mutations——用于操作数据(state)
const mutations = {
    ADDNUM(state, val) {
        state.sum += val
    },
    SUBNUM(state, val) {
        state.sum -= val
    }
};
// 准备state——用于存储数据
const state = {
    sum: 0, //和
};
// 创建并导出vuex
export default new Vuex.Store({
    actions,
    mutations,
    state
})

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

3.组件中修改vuex中的数据：

this.$store.dispatch("actions中的方法名", 数据);
或
this.$store.commit("mutations中的方法", 数据);

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即直接用commit，调用mutations中的方法

getters的使用

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

2.配置getters

const getters={
	newNum(state){
		return state.num*10
	}
}

export default new Vuex.Store({
	...
	getters
})

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

四个map方法的使用

使用之前要先映射：

// 映射状态
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";

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

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

computed: {
    //   借助mapState生成计算属性，从state中读取数据（对象写法）
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    //   借助mapState生成计算属性，从state中读取数据（数组写法）
    ...mapState(["sum", "school", "subject"]),
    /* dSum() {
      return this.$store.getters.dSum;
    }, */
    //借助mapgetters生成计算属性，从getters中读取数据（对象写法）
    //...mapGetters({dSum:'dSum'}),
    //借助mapgetters生成计算属性，从getters中读取数据（数组写法）
    ...mapGetters(["dSum"]),
  },

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

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

 methods: {
    // 对象写法
    // ...mapMutations({ ADDNUM: "ADDNUM", SUBNUM: "SUBNUM" }),
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系Mutations，数组写法
    ...mapMutations(["ADDNUM", "SUBNUM"]),
    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系mapActions，数组写法
    ...mapActions(["OddNum", "delay"]),
    // 对象写法
    ...mapActions({ OddNum: "OddNum", delay: "delay" }),
  },

案例：

vue文件

<template>
  <div>
    <h2>当前的和为:{{ sum }}</h2>
    <h4>加工后的和为:{{ dSum }}</h4>
    <h3>我在{{ school }}学习{{ subject }}</h3>
    <!-- v-model.number双向绑定的是number类型的 -->
    <select v-model.number="num">
      <!-- value="1"中的1是字符串类型，:value="1"中的1是number类型 -->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <!-- <button @click="add">+</button>
    <button @click="sub">-</button>
    <button @click="addOdd">当前和为奇数再加</button>
    <button @click="addWait">等一等再加</button> -->
    <button @click="ADDNUM(num)">+</button>
    <button @click="SUBNUM(num)">-</button>
    <button @click="OddNum(num)">当前和为奇数再加</button>
    <button @click="delay(num)">等一等再加</button>
  </div>
</template>

<script>
// 映射状态
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  data() {
    return {
      num: 1, //选择的数字
    };
  },
  methods: {
    //   程序员写的
    /* add() {
      //   this.$store.dispatch("addNum", this.num);
      //   this.$store.commit("ADDNUM", this.num);
      this.ADDNUM(this.num);
    },
    sub() {
      //   this.$store.dispatch("subNum", this.num);
      //   this.$store.commit("SUBNUM", this.num);
      this.SUBNUM(this.num);
    },
    addOdd() {
      //   this.$store.dispatch("OddNum", this.num);
      this.OddNum(this.num);
    },
    addWait() {
      //   this.$store.dispatch("delay", this.num);
      this.delay(this.num);
    }, */
    // 对象写法
    // ...mapMutations({ ADDNUM: "ADDNUM", SUBNUM: "SUBNUM" }),
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系Mutations，数组写法
    ...mapMutations(["ADDNUM", "SUBNUM"]),
    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系mapActions，数组写法
    ...mapActions(["OddNum", "delay"]),
    // 对象写法
    ...mapActions({ OddNum: "OddNum", delay: "delay" }),
  },
  computed: {
    // 程序员写的
    /* sum() {
      return this.$store.state.sum;
    },
    school() {
      return this.$store.state.school;
    },
    subject() {
      return this.$store.state.subject;
    }, */
    //   借助mapState生成计算属性，从state中读取数据（对象写法）
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    //   借助mapState生成计算属性，从state中读取数据（数组写法）
    ...mapState(["sum", "school", "subject"]),
    /* dSum() {
      return this.$store.getters.dSum;
    }, */
    ...mapGetters(["dSum"]),
  },
};
</script>

<style>
</style>

store文件

// store
// 引入vuex、vue
import Vuex from 'vuex'
import Vue from 'vue'
// 使用vuex
Vue.use(Vuex);

// 准备actions——用于响应组件中的动作
const actions = {
    // 加减这两个操作无需放在actions里面，多余的
    /* // 加
    addNum(context, val) {
        // console.log(context);
        // console.log(val);
        context.commit('ADDNUM', val)
    },
    // 减
    subNum(context, val) {
        context.commit('SUBNUM', val)
    }, */
    // 奇数时减
    OddNum(context, val) {
        if (context.state.sum % 2) {
            context.commit('ADDNUM', val)
        }
    },
    // 延时操作
    delay(context, val) {
        setTimeout(() => {
            context.commit('ADDNUM', val)
        }, 500);
    }
};
// 准备mutations——用于操作数据(state)
const mutations = {
    ADDNUM(state, val) {
        state.sum += val
    },
    SUBNUM(state, val) {
        state.sum -= val
    }
};
// 准备state——用于存储数据
const state = {
    sum: 0, //和
    school: 'XXX学院',
    subject: '前端'
};
// 准备getters——用于将state中的数据进行加工处理,相当于vue中的computed计算属性
const getters = {
    dSum(state) {
        return state.sum * 10
    }
};


// 创建并导出vuex
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

模块化+命名空间

开启命名空间：namespaced: true,

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

2.修改store

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

方式一：
this.$store.state.xxxx.list
方式二：
...mapState('xxxx',['数据名','数据名','数据名','数据名'])

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

方式一：
this.$store.getters["xxxx/list"]
方式二：
...mapGetters('xxxx',['数据名','数据名','数据名','数据名'])

5.开启命名空间后，组件中调用dispatch，来调用actions中的方法

方式一：
this.$store.dispatch("xxxx/方法名",传的实参)
方式二：
...mapActions('xxxx',{页面中的方法:"actions中的方法",页面中的方法:"actions中的方法"})

6.开启命名空间后，组件中调用commit，来调用mutations中的方法

方式一：
this.$store.commit("xxxx/方法名",传的实参)
方式二：
...mapMutations('xxxx',{页面中的方法:"mutations中的方法",页面中的方法:"mutations中的方法"})
h_jQuery
关注
专栏目录
Vue —— vuex
cc_xxo的博客
03-04 299
vuex 是专门在Vue中实现集中式状态（数据）管理的一个Vue插件 1、安装vuex 执行npm i vuex@3 注意版本 vue2------vuex3;vue3------vuex4 2、引入vuex插件 import Vuex from ‘vuex’ Vue.use(Vuex) 例如：创建一个index.js用于声明vuex实例 //引入Vuex import Vuex from 'vuex' // 引入Vue import Vue from 'vue' //使用插件 Vue.use(Vuex)
vue —— Vuex状态管理
七月
07-14 185
Vuex学习目标 Vuex 概述 Vuex 基本使用步骤 Vuex 核心概念 一、Vuex概述 1.1组件之间共享数据的方式 父向子传值：v-bind 属性绑定 ( props ) 子向父传值：v-on 事件绑定 ($emit自定义事件) 兄弟组件之间数据： EventBus 5. $on 接收数据的那个组件 6. $emit 发送数据的那个组件 1.2 Vuex 是什么 Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据的共享。 1.3 1）使用Vuex统一管理状
Vue—— vuex详解，彻底搞懂vuex
热门推荐
Bonsoir777的博客
10-15 2万+
本文主要介绍vue中 Vuex 的相关知识点！！！！
Vue——vuex简介
mantou_riji的博客
07-22 2441
vuex是专门在Vue中实现状态(）管理的一个Vue，对vue应用中 多个组件的共享状态(）进行(读/写)。 vuex也是一种，且适用于任意组件间通信。引入： 需求：组件B、C、D 都需要组件A上的数据X。 如果使用： 这时候我们就会想既然所有组件都要使用组件A中的数据我们为什么不直接把组件A中的数据提取出来作为公共数据呢，这就引入了vuex。 vuex不属于任何一个组件，里面存储的是组件公用的数据，任何组件都可以获取和修改vuex中的数据：所以只要用到共享数据就可以使用vuex。如果vue组件的请求有任
Vue——vuex
qq_43747991的博客
04-22 406
Vuex概念搭建vuex环境vuex的基本使用四个map的用法模块化+命名空间 概念 在vue中实现集中式状态（数据）管理的一个 Vue 插件，对Vue应用中多个组件的共享状态进行集中式的管理，也是一种组件间通信的方式，且适用于任意组件间通信。 搭建vuex环境 创建文件：src/store/index.js//引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备acti
Vue —— Vuex
weixin_54966486的博客
03-18 927
vuex 插件 Actions 、Mutations 、State 都是对象 {} ，都由 store 管理 必须让所有 vc 看见 store 安装 vuex **npm i vuex@3 : ** ​ vue2 中只能用 vuex3 版本，vue3 中只能用 vuex4 版本 main.js //引入 store import store from './store/index' //创建vm new Vue({ ..., //配置store(同名可简写).
Vue——监听vuex数据
月来better
05-17 932
store/index.js state{ drawerStatus: true, } Dashboard.vue data() { return { drawer: true, }; }, watch: { "$store.state.drawerStatus"() { this.drawer = this.$store.state.drawerStatus; } }
Vue——vuex的使用
奔跑的狮子
11-17 391
Vuex 文章目录Vuex为何要用vuexvuex的用途vuex安装vuex的使用vuex获取数据vuex触发事件 为何要用vuex vue中兄弟组件之间很难进行值的传递，于是产生了vuex来解决这个问题。 vuex的用途 相当于全局变量，在vuex中存储的属性和方法，可以在整个项目里进行调用。 vuex安装 npm install vuex -S vuex的使用 src下面新建了store目录，下面新建了index.js，index.js代码如下 import Vue from 'vue' //引入v
vue3——vuex简单使用及持久化
m0_57712926的博客
09-12 1441
目录前言一、什么是vuex？1. vuex中的模块2. 快速上手二、vue3中使用vuex1. 准备2. 使用三、 vuex持久化1. 为什么需要持久化处理？2. 如何做持久化处理？3. 效果展示总结 前言 vue2和vue3中如何使用vuex呢？有什么不同之处呢？vue3中vuex如何做持久化处理呢？本篇文章将给你答疑解惑，一起来看一下吧~ 一、什么是vuex？ 官网：vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的
vue第五天笔记02——vuex数据仓库练习
08-22
在“vue第五天笔记02——vuex数据仓库练习”中，我们将深入理解Vuex的工作原理和实践应用。 首先，Vuex的核心概念包括状态(state)、派生状态(getters)、 mutations(状态变更函数)、 actions(异步操作) 和模块...
vue——vuex在vue-element-admin项目中的简单应用
景严-的博客
08-22 1311
项目需求是：如图，点击左侧el-tree的节点，在点击右侧新建用户时，把点击的节点的部门名称赋值给表单中的部门机构项，同时点击节点时，表格自动刷新，显示该部门下的数据。 原本打算用全局变量来进行这个赋值，同时用watch监听这个变量的变化，调用刷新函数，但是组长说最好用vuex来完成，于是就打算尝试一下啦。 首先看一下项目中与vuex有关的目录： 1、modules文件夹中存放的是各个模块的状态...
日期时间选择器——el-date-picker设置默认时间
h_jQuery的博客
08-03 1万+
组件使用
vscode用Git上传项目到远程仓库（gitee）
h_jQuery的博客
07-06 1万+
git上传 在vscode的源代码管理那里操作 1.添加仓库：点击右上角的三点(…)—>选择远程—>选择添加远程存储库—>在弹出框那里输入远程的仓库地址（gitee或者是github） 这里填的是仓库名 2.将工作区的文件添加到暂存区（暂存更改）：点击更改字样右侧的**+**号 3.将暂存区的文件提交到本地仓库： 点击源代码管理字样右侧的√ 输入提交的备注信息（比如完成某某功能，或者完成了某某页面），然后就回车 完成了第三步，此时的页面 说明文件都提交了，提交到了本地仓库
文件上传——将文件转成base64传给后端
h_jQuery的博客
10-25 4317
文件上传转base64
vue组件封装——公用基础table组件
h_jQuery的博客
12-05 3653
vue公用基础表格组件封装案例
js处理——获取当前月第一天和最后一天
h_jQuery的博客
12-29 2903
js时间处理
KOA2的安装和使用教程
h_jQuery的博客
05-12 2279
KOA2 基于node.js平台的web服务器框架 Express.Koa(这个已经淘汰不用),Koa2都是web服务器的框架 Express异步处理:回调函数； Koa异步处理:Generator+yield Koa2异步处理:async/await 由于Koa2支持async/await，所以它要求Node的版本至少（最低）是7.6。因为async/await是在Node7.6版本之后出现才支持的 在Koa2的世界中，服务器处理请求的那一块程序，被称为中间件 洋葱模型：中间件对请求的处理有一种先进后出的
vuex案例——任务的增删改查
h_jQuery的博客
05-22 1954
1.创建个vuex项目 1.1在终端输入vue ui 1.2.在浏览器打开ui页面，点击Vue项目管理处 创建步骤和要求跟创建vue项目大致一样 点击1处，找文件位置 确定要将项目建在哪个文件，然后就进行第三步 这里就只填写项目名就可以了，其他就默认，填完项目名就直接下一步了 选择手动 选择完就下一步 ** 2.项目实施 ** 2.1删掉不必要的代码（app.vue里面的一些代码，删掉view文件夹，删掉components文件夹下的vue文件，还有router/index.js里面的一些代码
Vue踩坑之旅——Vuex
最新发布
06-03
Vuex 是一个专门为 Vue.js 应用程序开发的状态管理库，它集中管理应用程序的所有组件的状态。在使用 Vuex 过程中，可能会遇到以下一些常见的问题和坑： 1. 不要在 mutations 中执行异步操作，因为 mutations 是同步...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值