Vuex 入门笔记

最新推荐文章于 2024-05-05 22:11:34 发布
最新推荐文章于 2024-05-05 22:11:34 发布
阅读量385 收藏
点赞数
分类专栏： VUE 文章标签： vue 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Admin_Lian/article/details/107267684
版权

目录

(一) Vuex 概述

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

即: 状态管理对象, 存储管理着一些共享的状态对象(如: 登录令牌token、URL路由地址…), 以供各个组件使用、响应式的修改

Vuex应用的核心是store(仓库), store 基本上就是一个容器对象, 它里面存储管理着可共享的state(状态)

Vuex和全局对象的区别:

  • Vuex的状态存储是响应式的, 若 store 中的state状态发生改变, 那么相应的组件也会相应地得到更新
  • Vuex 官方不建议直接修改store中的state状态, 改变store中的state状态的唯一途径: commit提交mutation

在这里插入图片描述


(二) Vuex 基本使用

1. vuex 安装

通过命令安装vuex依赖, 也可以通过VueCli脚手架安装

npm install vuex --save

2. vuex 基本架构

在src下创建文件: /src/store/index.js

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

// 1. 通过Vue.use(插件), 安装插件
Vue.use(Vuex)

// 2.创建Vuex.Store对象并导出, 以供Vue实例使用
export default new Vuex.Store({
   // state: Vuex存储的状态共享对象
   state: {
      count: 100
   },
   mutations: {

   }, 
   actions: {
      
   },
   getters: {
      
   },
   mudules: {

   }
})

Vue实例使用store对象(main.js)

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store, // Vue实例使用store对象
  components: { App },
  template: '<App/>'
})

创建两个组件, 分别使用Vuex中state定义的count对象: this.$store.state.count

<template>
  <div>
    <h3>------------------子组件-----------------</h3>
    <p>子组件使用Vuex中state定义的 count: {{$store.state.count}}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildCmp'
}
</script>

<template>
  <div>
    <h3>------------------父组件-----------------</h3>
    <p>父组件使用Vuex中state定义的 count: {{$store.state.count}}</p>
    <child-cmp/>
  </div>
</template>

<script>
import ChildCmp from './childCmp'

export default {
  name: 'ParentCmp',
  components: {
     ChildCmp
  }
}
</script>

在这里插入图片描述


(三) vuex-state

state: Vuex存储的状态对象, Vuex 使用单一状态树, 用一个对象就包含了全部的应用层级状态, 即作为一个唯一数据源而存在, 也意味着, 每个应用将只会有一个store实例

// 在此定义的状态, 状态对象共享给各个组件
state: {
	counter: 1,
	...
}

mapState: 辅助函数, 在组件中将多个状态定义为计算属性, mapState() 函数返回值是个compute对象

  • mapState({}): 函数的参数为对象
    import { mapState } from 'vuex'

export default {
	... ,
	
	computed: mapState({
		// 第一种写法: 计算属性名: function(state) { return ... }
		counter1 : function(state) {
			// state: Vuex中state对象
			return state.counter * 10
		}

		// 第二种写法: 计算属性名: '字符串参数', 等同于 counter1: state => state.counter
		counter1: 'counter'
	})
}
  • mapState([]): 函数的参数为数组
    import { mapState } from 'vuex'

export default {
	... ,
	// 计算属性的名称 与 state中对象名称相同
	computed: mapState([
		'counter'
	])
}
  • mapState() 函数 与 组件内计算属性 并存(对象展开运算符)
    import { mapState } from 'vuex'

export default {
	... ,
	data() {
		return {
			num: 10
		}
	},
	computed: {
		increment() {
			return num+++
		},
		...mapState({})
	}
}

(三) vuex-getters

getters: 可以认为是store的计算属性, 对state状态对象进行逻辑计算, 且getters的返回值会根据它的依赖被缓存起来, 只有当它的依赖值发生改变才会被重新计算

export default new Vuex.store({
	state: {
		counter: 100
	},
	getters: {
		// 默认参数传递state对象和getters对象
		powerCounter(state, getters) {
			return state.counter * state.counter
		},
		sumCounter(state) {
			// 返回一个函数, 函数存在一个参数num, 函数再返回num+counter
			return function(num) {
				return state.counter + num
			}
		}
	}
})

<h3>{{$store.getters.powerCounter}}</h3> <!-- 10000 -->
<h3>{{$store.getters.sumCounter(100)}}</h3> <!-- 200 -->

(四) vuex-mutations

Mutation状态更新: 更改Vuex的store中的状态的唯一方法是提交mutation, 且 Mutation 必须是同步函数, 是为让devtools工具可以捕捉mutation的快照, 记录每一次对state的操作. 如果为异步操作, devtools工具无法记录

mutation主要包括两部分:

  • 字符串的事件类型(type)
  • 一个回调函数(handler), 函数有两个参数: state状态对象 和 payload载荷对象(commit提交时, 传入的额外参数对象)

通过 this.$store.commit(‘事件类型’, payload) 修改Vuex的store中的状态

export default new Vuex.store({
	state: {
		counter: 100
	},
	mutations: {
		// 事件类型: function(状态对象, 载荷参数) {}
		increment: function(state, payload) {
			state.counter += payload
		},
		encrement(state, payload) {
			state.counter -= payload.num // 因为下面使用了对象的提交风格
		}
	}
})

<template>
  <div>
    <p>{{$store.state.counter}}</p>
    <button @click="addition(5)">+5</button>
    <button @click="subtraction(10)">-10</button>
  </div>
</template>

<script>
export default {
	name: 'ParentCmp',
	methods: {
		addition(num) {
			// 通过提交mutation修改Vuex的store中的状态
        	this.$store.commit('increment', num)
	    },
	    subtraction(num) { 
	    	// 对象风格的提交方式
	    	this.$store.commit({
	    		type: 'encrement',
	    		num
	    	})
	    }
	}
}
</scritp>

在这里插入图片描述


(五) vuex-actions

Action: 类似于Mutation, 用来替代Mutation进行异步操作. Action最终还是只能通过提交mutation来修改状态, 而不是直接变更状态

action主要包括两部分:

  • 字符串的事件类型(type)
  • 一个回调函数(handler), 函数有两个参数: context状态对象 和 payload载荷对象(dispatch分发时, 传入的额外参数对象)

通过 this.$store.dispatch(‘事件类型’, payload) 分发Action

export default new Vuex.store({
	state: {
		counter: 100
	},
	mutations: {
		increment: function(state, payload) {
			state.counter += payload
		},
		encrement(state, payload) {
			state.counter -= payload.num 
		}
	},
	actions: {
		// 事件类型: function(状态对象, 载荷参数) {}
		asynincrement(context, payload) {
			// 模拟异步操作
			setTimeout(() => {
				// action 内部也是通过提交mutation来修改状态
				context.commit('increment', payload)
			}, 1000)
		}
	}
})

<template>
  <div>
    <p>{{$store.state.counter}}</p>
    <button @click="addition(5)">+5</button>
    <button @click="subtraction(10)">-10</button>
    <button @click="asynAddition(10)">异步 +10</button>
  </div>
</template>

<script>
export default {
	name: 'ParentCmp',
	methods: {
		addition(num) {
        	this.$store.commit('increment', num)
	    },
	    subtraction(num) { 
	    	this.$store.commit({
	    		type: 'encrement',
	    		num
	    	})
	    },
	    asynAddition(num) {
		    // 通过 this.$store.dispatch('事件类型', payload) 分发Action
	    	this.$store.dispatch('asynincrement', num)
	    }
	}
}

在这里插入图片描述

(六) vuex-modules

Vue使用单一状态树, 意味着只存在一个Store实例, 会将所有的状态对象交给一个Store来管理, 当应用变的非常复杂时, Store对象就会变得异常臃肿

Module: Vuex允许将Store分割成 module模块, 每个模块都拥有自己的 state、getters、mutations、actions等. 多个模块, 使用 namespaced命名空间属性来区分

const moduleA = {
	namespaced: true, // 使用命名空间属性来区分模块
	state: {
		name: 'zhangsan' // this.$store.state.moduleA.name 获取
	},
	gettters: {
		/*
			state:	当前模块state状态对象
			getters: 当前模块getters计算属性
			rootState: 根模块state状态对象(也包含了所有子模块state对象)
			rootGetters: 根模块rootGetters计算属性(也包含了所有子模块rootGetters计算属性)
		*/
		nameInfo(state, getters, rootState, rootGetters) {
			return sate.name + ' Info' // this.$store.getters['module/nameInfo'] 获取
		}
	},
	mutations: {
		updateNameM(state, payload) {
			state.name = 'lisi' // this.$store.commit('moduleA/updateNameM') 提交
		}
	},
	actions: {
		/*
			context: store上下文对象
			context: {state, getters, rootState, rootGetters, commit, dispatch}
		*/
		updateNameA(context, payload) {
			setTimeout(() => {
           		context.commit('updateNameM') // this.$store.dispatch('moduleA/updateNameA') 分发Action
         	}, 1000)
		}
	}
}

const moduleB = {
	namespaced: true,
	state: {...},
	getters: {...},
	mutations: {...},
	actions: {...},
	modules: {...}
}

export default new Vux.store({
	state: {...},
	getters: {...},
	mutations: {...},
	actions: {...},
	modules: {
		moduleA,
		moduleB,
		...
	}
})

使用辅助函数绑定带命名空间的模块

import {mapState, mapGetters, mapActions, mapMutations} from 'vuex'

export default {
	name: 'ParentCmp',
	computed() {
		...mapState('moduleA', [
			'name',
			...
		]),
		...mapGetters('moduleA', [
			'nameInfo',
			...
		])
	},
	method() {
		...mapMutations('moduleA', [
			'updateNameM',	// 直接当普通方法使用, 自动提交
			...
		]), 
		...mapActions('moduleA', [
			'updateNameA', // 直接当普通方法使用, 自动分发
			...
		])
	}
}
又十七
关注
专栏目录
vuex简单入门
吴小花的博客
02-24 165
需要先删除node_modules，然后使用cnpm install重新安装 然后 安装vuex 命令：cnpm install vuex --save-dev 要是使用vuex首先新建一个store.js文件，然后引用Vuex这个组件，然后定义state(定义组件管理或者公用的状态）和mutations（定义改变状态的方法） store.js文件的代码： imp...
Vuex简单入门
jiandan1127的博客
09-10 413
一、简介 官网介绍： Vuex是一个专为Vue开发的应用程序的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 简单理解: 就是定义一个全局对象,然后在全局对象里面取数据,操作数据.可以这么理解但是有一点点不同. (就是引入一个jquery,到哪里$一下就可以了) Vuex状态管理跟使用传统全局变量的不同之处： 1.Vuex...
vuex入门
weixin_43656326的博客
07-15 98
vuex入门
Vuex 入门
ivenqin的博客
03-13 246
什么是Vuex ？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。 什么情况下使用Vuex 一般情况下，我们需要根据项目的实际大...
Vuex入门
大灰狼的小绵羊哥哥的博客
10-11 258
一. 什么是Vuex? Vuex Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex核心 上图中绿色虚线包裹起来的部分就是Vuex的核心, state中保存的就是公共状态, 改变state的唯一方式就是通过mutations进行更改. 可能你现在看这张图有点不明白, 等...
使用Vuex实现一个笔记应用的方法
11-28
在网上找到了一个入门的笔记应用，即便是入门级的应用，在学习途中依旧困难重重。特将学习作此笔记，方便今后回看，也希望能够帮到刚开始学习 Vue 的女同学 附原作者 Github 链接：...
vuex入门到实战——实现一个todoList待办清单【学习记录】
weixin_43633329的博客
02-26 2684
文章目录前言一、Vuex是什么？Vuex核心概念1. State2. Mutation3.Action二、使用步骤1.引入库2.读入数据总结 前言 本文将从Vuex的核心概念出发，通过讲解一个待办清单的小项目，帮助大家更好的理解Vuex。此文主要是根据近日学习的关于Vuex的内容，整理出的学习笔记，用来巩固与记录。欢迎大家交流与讨论😊 主要参考视频为黑马程序员的“Vue全家桶-Vuex” 原视频地址 https://www.bilibili.com/video/BV1h7411N7bg?from=se
Vue全家桶--Vuex学习笔记
qq_37396088的博客
01-31 339
vuex学习 终于学完了vue vue-loader vuex三件套！vuex学习完了记录笔记如下，是看的b站上的vue入门到实战和对比着官方文档学习的 vuex安装 npm install -S vuex store.js import Vuex from ‘vuex’ import Vue from ‘vue’ Vue.use(Vuex) const store = new Vues.store({ state:{}, mutations:{}, actions:{} }) export default
html页面使用vuex,使用 Vuex 实现一个笔记应用
weixin_36225637的博客
06-03 2223
最近开始着手学习 Vue，先大略的过了一遍官方文档，跟着敲过一部分官方文档中的 DEMO，然而还是不甚了了。在网上找到了一个入门的笔记应用，即便是入门级的应用，在学习途中依旧困难重重。特将学习作此笔记，方便今后回看，也希望能够帮到刚开始学习 Vue 的女同学预期目标笔记具备如下基本功能1.新增2.删除3.收藏4.在全部笔记和收藏笔记间切换5.在当前列表中进行搜索卖家秀买家秀准备工作1.新建项目选个...
2024年Web前端最新Vuex入门(四)—— action和，达内web前端开发课程
最新发布
2401_84617356的博客
05-05 811
,state: {count: 1,},mutations: { // 类似于计算属性 computedincrement(state) { // 把上面state对象当参数传入,取对象里面的进行操作},},},getters: {},resolve();}, 1000)});},
vuex的入门教程
qq_45018844的博客
09-06 325
vuex的结构 vuex官网 基本掌握这四个即可，后续通过做项目实战进阶 开始使用 1. 创建一个vue项目 2. 安装vuex npm install vuex --save 3. 新建store目录，创建一个index.js 4. index.js中写入基本结构 import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex) export default new Vuex.Store({ state :{}, get
VUEX入门教程
weixin_43989275的博客
04-29 341
首先，新建一个vue项目，在命令行中使用：vue init webpack web 然后，安装vuex，使用命令：npm install vuex --save 出现以下代码提示显示安装成功： 首先，我们在src目录下新建文件夹 store，在当前文件夹中新建文件index.js 在当前的index.js文件中，我们在文件中引用入ue和vuex，在vue中注册vuex，创建vuex.Stor...
vuex入门教程
java技术博客
03-26 543
vuex入门教程 参考网址: https://mp.weixin.qq.com/s/rs2xAvsY8SYtrMchz88dlQ 说明 vuex 对于 vue 来说 , 也是很重要的组件 , 但是项目是否使用 vuex 看情况而定 , 不是为了使用 vuex 而使用 vuex vuex , vue-router , axios 基本都是 vue-cli 中必不可少的组件 , 加上 UI 组件 element-ui , 基本就可以完成一个简单的项目了 这篇文章很好的介绍了 vuex 的使用 , 通俗易懂
Vuex入门教程
weixin_44893441的博客
03-26 128
Vuex的入门及实战 可以先进入vuex官方文档 vuex官方中文文档 一、Vuex的安装与引入 使用CDN引入 <script src="/path/to/vuex.js"></script> 使用npm安装vuex（确认有没有安装node） npm install vuex --save 然后在main.js中调用vuex组件 import Vue from 'vue' import Vuex from 'vuex' Vue use(Vuex) new Vue({ e
Vuex快速入门
Pima
12-26 325
Vuex是什么？ 做数据共享和传递（不同页面之间的数据传递） 单一状态树管理，让数据的修改脉络更佳清晰，便于定位问题，模块化 Vuex有什么 State：要共享的数据（全局变量） Getter：相当于vue中computed，及计算属性，可以用于监听，计算state中的值的变化 Mutation：Vuex中去操作数据的方法（只能同步执行） Action：用来操作Mutation的动作，他不能自己去...
Vue全家桶学习笔记：从入门到实践
本资源是一份详细的Vue全家桶学习笔记，旨在提供从入门到深入理解Vue及其相关技术的完整指南。主要内容包括： 1. **Vue基础**： - Vue的核心功能：Vue是一个轻量级的MVVM框架，它强调组件化开发，具有插件、组件、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值