【前端学习笔记】Vuex 3.x 学习笔记

已于 2022-05-07 22:29:16 修改
阅读量1.2k 收藏
点赞数
文章标签： vue.js
于 2022-03-20 18:05:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42591485/article/details/123617729
版权
本文详细介绍了Vuex在Vue.js应用中的使用，包括安装、基本概念如state、mutations、actions、getters，以及组件中如何绑定Vuex的state和计算属性。通过实例展示了如何创建和使用模块化Vuex store，强调了异步操作应放在actions中，以及如何通过辅助函数简化代码。最后提到了Vuex的模块化和命名空间特性，帮助组织复杂应用的状态。
摘要由CSDN通过智能技术生成

本篇笔记代码地址：https://github.com/zhangtuo1999/study-vuex

一、Vuex 介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简言之，Vuex可以管理一些数据，以便所有组件共享。

二、Vuex 工作原理图

在这里插入图片描述

三、Vuex 使用

3.1 安装 Vuex

NPM 安装

npm install vuex@3 --save	//Vue2 对应 Vuex3

3.2 在 Vue 项目中使用 Vuex

以实现计数功能为例：

在这里插入图片描述

在 src/store/index.js 中：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
      count:0						// 状态
  },
  mutations: {
      HANDLE_ADD(state, num) {		// 显式改变state的mutation
         state.count += num
      }
  },
})

在 src/main.js 中：

import Vue from 'vue'
import App from './App.vue'
import store from './store'		// 引入store

Vue.config.productionTip = false

new Vue({
  store,						// 将store注入vue
  render: h => h(App)
}).$mount('#app')

在 src/componentsChild.vue 中：

<template>
  <div>
    <h1>count:{{ count }}</h1>
    <input v-model.number="num">	
    <button @click="handleClick">点击count++</button>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
        num: 1
    }
  },
  computed: {
    count() {
      return this.$store.state.count
    }
  },
  methods: {
    handleClick() {
      this.$store.commit('HANDLE_ADD',this.num)
    }
  }
}
</script>

在 App.vue 中：

<template>
  <div id="app">
    <Child></Child>
  </div>
</template>

<script>
import Child from "@/components/Child";

export default {
  name: 'App',
  components: {
    Child,
  }
}
</script>

3.3 State

state 中保存需要用 vuex 来管理的数据。

在 src/store/index.js 中：（Vuex）

state: {
	count:0		//交给 Vuex 管理的数据
},

在 Child.vue 中：（组件）

computed: {
    count() {
    	return this.$store.state.count
    }
},

3.4 Mutations

不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

在 src/store/index.js中

mutations: {
    HANDLE_ADD(state, num) {	//此处的 num 被称为载荷。如果需要传参较多，载荷应该为含有多个字段的对象
    	state.count += num
    }
}

不能直接调用一个 mutation handler。这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。”要唤醒一个 mutation handler，你需要以相应的 type 调用 store.commit 方法：

在 Child.vue 中

methods: {
    handleClick() {
        this.$store.commit('HANDLE_ADD', this.num)	//组件中提交 mutation
    }
}

注意：

  • 一条重要的原则就是要记住 mutation 必须是同步函数。异步操作放入 action 中。
  • 一般把 mutation 中的函数名写成大写。

3.5 Actions

Action 类似于 mutation，不同在于：

  • Action 提交的是 mutation，而不是直接变更状态。
  • Action 可以包含任意异步操作。

在 src/store/index.js 中

actions: {
    handleAdd(context,num){
        context.commit('HANDLE_ADD',num)
    }
},

注意：

  • Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

  • Action 通过 store.dispatch 方法触发，在 Child.vue 中

    methods: {
    handleClick() {
    	this.$store.dispatch('handleAdd',this.num)
    }
}

  • Action 中可以执行异步操作。store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。

3.6 Getters

有时候我们需要从 store 中的 state 中派生出一些状态。比如 count 的10倍。

在这里插入图片描述

在 Child.vue 中：

computed: {
  bigCount () {
    return this.$store.state.count * 10
  }
}

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它——无论哪种方式都不是很理想。

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数：

在 store/index.js 中：

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

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        HANDLE_ADD(state, num) {
            state.count += num
        }
    },
    getters: {
        bigCount(state){				// bigCount 是 state 中 count 的 10 倍
            return state.count * 10	
        }
    },
})

  • Getter 也可以接受其他 getter 作为第二个参数：

    getters: {
    bigCount(state){
        return state.count * 10
    },
    largeCount(state, getters){	// largeCount 等于 state 中 count 加上 getters 中的 bigCount
        return state.count + getters.bigCount
    }
},

在这里插入图片描述

四、组件绑定的辅助函数

4.1 mapState

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

4.1.1 对象写法

在 Child.vue 中

<template>
  <div>
    <h1>count:{{ count }}</h1>
    <input v-model.number="num">
    <button @click="handleClick">点击count+num</button>
  </div>
</template>

<script>
import {mapState} from 'vuex'		//借助 mapState 简化state在computed中的写法

export default {
  name: "Child",
  data() {
    return {
      num: 1
    }
  },
  computed: {
    ...mapState({count:'count'})	// mapState 在 computed 中的第一种写法：对象写法
  },
  methods: {
    handleClick() {
      this.$store.commit('HANDLE_ADD', this.num)
    }
  }
}
</script>

注意：

  • 对象写法中第一个 count 指的是在这个组件中使用的名称，第二个 'count' 指的是在 Vuex 中 state 的 key 值。即映射 this.count 为 store.state.count
  • mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？使用对象展开运算符即...

4.1.2 数组写法

当映射的计算属性的名称与 state 的子节点名称相同时，我们也可以给 mapState 传一个字符串数组。

computed: {
	...mapState(['count'])	//映射 this.count 为 store.state.count
}

4.2 mapGetters

用法等同于 mapState：

在 Child.vue 中：

<template>
  <div>
    <h1>count:{{ count }}</h1>
    <h1>bigCount:{{ bigCount }}</h1>
    <input v-model.number="num">
    <button @click="handleClick">点击count+num</button>
  </div>
</template>

<script>
import {mapState,mapGetters} from 'vuex'

export default {
  name: "Child",
  data() {
    return {
      num: 1
    }
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['bigCount'])
  },
  methods: {
    handleClick() {
      this.$store.commit('HANDLE_ADD', this.num)
    }
  }
}
</script>

效果：

在这里插入图片描述

4.3 mapMutations

在 Child.vue 中：

<template>
  <div>
    <h1>count:{{ count }}</h1>
    <h1>bigCount:{{ bigCount }}</h1>
    <h1>largeCount:{{ largeCount }}</h1>
    <input v-model.number="num">
    <button @click="handleCommit(num)">点击commit</button>
  </div>
</template>

<script>
import {mapState, mapGetters, mapMutations} from 'vuex'

export default {
  name: "Child",
  data() {
    return {
      num: 1
    }
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['bigCount', 'largeCount'])
  },
  methods: {
    ...mapMutations({handleCommit: 'HANDLE_ADD'}),
  }
}
</script>

4.4 mapActions

在 Child.vue 中：

<template>
  <div>
    <h1>count:{{ count }}</h1>
    <h1>bigCount:{{ bigCount }}</h1>
    <h1>largeCount:{{ largeCount }}</h1>
    <input v-model.number="num">
    <button @click="handleCommit(num)">点击commit</button>
    <button @click="handleDispatch(num)">点击dispatch</button>
  </div>
</template>

<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

export default {
  name: "Child",
  data() {
    return {
      num: 1
    }
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['bigCount', 'largeCount'])
  },
  methods: {
    ...mapMutations({handleCommit: 'HANDLE_ADD'}),
    ...mapActions({handleDispatch: 'handleAdd'}),

  }
}
</script>

五、模块化

5.1 模块化实现

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

在 src/store 下新建一个文件夹，命名为 modules。在 modules 下新建一个 countAbout.js 用于存放和计数相关的 store 相关子模块。

export default {
    state: {
        count: 0
    },
    getters: {
        bigCount(state) {
            return state.count * 10
        },
        largeCount(state, getters) {
            return state.count + getters.bigCount
        }
    },
    mutations: {
        HANDLE_ADD(state, num) {
            state.count += num
        }
    },
    actions: {
        handleAdd(context, num) {
            context.commit('HANDLE_ADD', num)
        }
    }
}

在 src/store/index.js 中：

import Vue from 'vue'
import Vuex from 'vuex'
import countAbout from "@/store/modules/countAbout";

Vue.use(Vuex)

export default new Vuex.Store({
    modules: {
        countAbout
    }
})

5.2 命名空间

在模块中使用 namespaced:true 开启命名空间。

在 countAbout.js 中：

export default {
    namespaced:true,
    state: {
        count: 0
    },
    getters: {
        bigCount(state) {
            return state.count * 10
        },
        largeCount(state, getters) {
            return state.count + getters.bigCount
        }
    },
    mutations: {
        HANDLE_ADD(state, num) {
            state.count += num
        }
    },
    actions: {
        handleAdd(context, num) {
            context.commit('HANDLE_ADD', num)
        }
    }
}

在 Child.vue 中：

<template>
  <div>
    <h1>count:{{ count }}</h1>
    <h1>bigCount:{{ bigCount }}</h1>
    <h1>largeCount:{{ largeCount }}</h1>
    <input v-model.number="num">
    <button @click="handleCommit(num)">点击commit</button>
    <button @click="handleDispatch(num)">点击dispatch</button>
  </div>
</template>

<script>
import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

export default {
  name: "Child",
  data() {
    return {
      num: 1
    }
  },
  computed: {
    ...mapState('countAbout', ['count']),
    ...mapGetters('countAbout', ['bigCount', 'largeCount'])
  },
  methods: {
    ...mapMutations('countAbout',{handleCommit:'HANDLE_ADD'}),
    ...mapActions('countAbout',{handleDispatch:'handleAdd'}),

  }
}
</script>

六、参考

  • https://v3.vuex.vuejs.org/zh/
Tourry
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuex 3使用总结
weixin_43930421的博客
09-12 630
但是当遇到多个组件共享状态时，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力，甚至会导致无法维护的代码。getter可以认为是 store 的计算属性，返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。写过 vue 项目的程序员应该都知道父子组件传参的方式，通过子组件的 props 参数，和 $emit 来触发事件。基于此，把组件的共享状态抽取出来，以一个全局单例模式管理，vuex 就产生了。如果有多个组件需要共用状态的某计算属性，可以使用它。
VUE----Vuex 3.x 基础知识
王延朕的博客
03-29 327
Vuex 1.概念 在Vue中实现集中式状态(数据)管理的一个Vue插件,对vue应用中多个组件的共享状态进行集中式管理(读/写),也是一种组件 间通信的方式,且适用于任意组件间通信 2.何时使用? 多个组件需要共享数据时 3.搭建vuex环境 1.创建文件:src/store/index.js // 引入vue import Vue from 'vue' // 引入Vuex import Vuex from
vuex3
李剑一
10-11 749
vuex 是专门为 vue 开发的状态管理模式，它采用集中存储管理应用中所有组件的状态，并根据特定规则响应数据变化。
Vuex3
薛定谔的猫
04-03 419
概念：专门在Vue中实现集成式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件化通信的方式，且适用于任意组件中通信。github地址如果使用兄弟组件传递数据，通过全局事件总线确实很舒服，但是一旦组件多起来，使用全局事件总线就变的麻烦而使用vuex就没有那么麻烦了，vuex是独立于组件外的，需要的数据就放到vuex上保存，需要就直接去拿，不像全局事件总线一样，你需要修改数据，还要emit发送，$on绑定了什么时候使用Vuex?
Vuex3的简介与使用
m0_51424889的博客
06-26 278
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。它为应用程序中的所有组件提供了一个简单的全局状态管理器。使用 Vuex，我们可以轻松地管理应用程序中的各种状态，例如登录状态、用户信息、购物车中的商品数量、商品列表等等。在该组件中，我们使用了 Vuex 提供的 mapGetters 和 mapActions 帮助函数将 Store 中的状态和方法映射到组件中。mutations：一种更改状态的方式，必须是同步函数；state：用于存储应用程序中的所有状态；
vue项目总结和前端学习笔记-06091809.pdf
05-28
### Vue项目总结和前端学习笔记知识点梳理 #### Vue环境搭建 在学习Vue之前，首先要配置好开发环境。这包括安装Node.js和npm（Node.js的包管理器）。Node.js可以通过访问官方下载页面，选择对应操作系统的.msi格式...
VUE入门学习项目资料与学习笔记.zip
02-12
这个名为“VUE入门学习项目资料与学习笔记.zip”的压缩包包含了一份详细的学习资源，帮助初学者深入理解Vue.js的核心概念和技术。以下是对这些资源的详细解读： 1. **Vue环境搭建**：Vue的安装通常有两种方式，一种...
前端主流框架 vue.js笔记
06-28
3. **状态管理**：Vuex是Vue.js的状态管理库，它提供了一个集中式的存储机制，解决了组件之间复杂的数据通信问题。 4. **异步组件与懒加载**：Vue.js支持异步组件，可以按需加载，显著提升页面加载速度。 5. **插槽...
vuex个人学习笔记代码
04-16
本笔记将深入探讨Vuex的核心概念、基本用法以及在实际项目中的应用场景。 首先，我们要理解Vuex的基本架构。Vuex采用的是flux设计模式，其核心包括store（商店）、state（状态）、mutations（变异）、actions（行动...
前端学习笔记，常见面试题，vue源码解析
10-02
本学习笔记主要涵盖了Vue.js的基础知识、常见面试题以及源码解析，旨在帮助开发者深入理解Vue.js的运作机制，并提升在实际项目中的应用能力。 首先，Vue.js的基本概念和特性是学习的起点。Vue的核心思想是声明式...
vuex基本使用心得（3）
会点php的前端小渣渣
03-20 1459
这节主要讲了 几个辅助函数，我贴了代码，很容易理解&lt;template&gt; &lt;div class="hello"&gt; &lt;h1 v-if="is_show2"&gt;vuex小例子：点击切换文字的隐藏 &lt;/h1&gt; &lt;a href="javascript:;" @click="dj"&gt;点
Vuex
m0_57002951的博客
08-11 261
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库. 初步了解vuex里面各个状态的功能
vue学习笔记（三）之vuex
qq_44743216的博客
04-10 1011
vuex简介 简介 概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应 用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方 式，且适用于任意组件间通信。 Github 地址: https://github.com/vuejs/vuex ...
【Uni-App】Vuex在vue3版本中的使用与持久化
最新发布
RisunJan的博客
01-26 3185
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。基本元素：store（里面存数据），mutation（里面修改数据），action（里面异步调用mutation来修改数据），getter（获取数据）简而言之就是用来存数据，可以有效减少使用组件传参困扰的头痛。
vuex3的介绍与state、actions和mutations的使用
qq_56715703的博客
03-10 2106
Vuex 是什么？Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
Vue —— vuex
cc_xxo的博客
03-04 281
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)
Vue3 - Vuex使用(一)
weixin_39137100的博客
02-08 888
Vuex 适用于复杂的状态管理
基于Vue2使用Vuex3
A_lexzanda的博客
09-21 510
在使用state中的属性时，我们往往需要使用属性的派生状态，如过滤等操作，getter可以认为是store中的计算属性，就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。Vuex使用单一状态树，用一个对象包含全部应用层级的状态，这意味着每个Vue应用将仅仅包含一个store实例。简单理解为可以把多个组件共享的变量（状态）全部存储在一个对象里面，将该对象放在顶层的Vue实例中，让其他组件使用并响应式刷新。
npm引入 vuex命令安装
屯庆的博客
11-07 8504
在 Vue 之后引入 vuex 会进行自动安装： &lt;script src="/path/to/vue.js"&gt;&lt;/script&gt; &lt;script src="/path/to/vuex.js"&gt;&lt;/script&gt; npm npm install vuex --save yarn yarn add vuex ...
Vue 2.0 学习笔记：渐进式前端框架解析及HelloWorld示例
"Vue 2.0 版本的学习笔记" Vue.js 是一款广泛采用的前端JavaScript框架，由尤雨溪创建。Vue 2.0 是该框架的一个主要版本，它致力于提供一个渐进式和自底向上增量开发的解决方案。渐进式意味着Vue可以逐步集成到现有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值