vuex使用及总结

系统管理员 2024-04-17 06:01 92阅读 0赞

vuex小结

import Vuex from 'vuex'
    Vue.use(Vuex)
    
    var store = new Vuex.Store({ 
    	state: { 
    		//可以吧state想想成组件中的data，专门用来存储数据的
    		//如果在组件中，想要访问 store中的数据，只能通过 this.$store.state.*** 来访问
    		count: 0	//存储的数据
    	},
    	mutations: { 
    		//注意：如果要操作state值，智能通过调用mutations提供的方法，才能操作数据
    		//使用：调用mutations中的方法，智能使用 this.$store.commit('方法名')
    		increment(state){ 	//修改count的方法，在组件中使用 this.$store.commit('increment')调用
    			state.count++
    		}
    		//也可以传参数 this.$store.commit('increment', '参数')
    	},
    	getters: { 
    		//注意：这里的getters，只负责对外提供数据，不负责修改数据。
    		optCount:function(state){ 	//对数据进行包装 ，在组件中使用 this.$store.getters.optCount()
     			return '当前最新的count值是：'+ state.count
    		}
    		// getters中的方法和 组件中的过滤器比较类似，因为都没有修改元数据，都是把原数据进行了一层包装，提供给调用者
    		// getters中的方法和 computed比较像，只要state中的数据发生改变，如果getters中正好也引用了这个数据，那么立即触发getters的重新求值
    	}
    })

Vuex总结：
    1. state中的数据，不能直接修改，如果想要修改，必须通过mutations
    2. 如果组件想要直接从 state上获取数据，需要 this.$store.state.***
    3. 如果组件，想要修改数据，必须使用mutations 提供的方法，需要通过 this.$store.commit('方法名称',唯一的参数)
    4. 如果store中state上的数据，在对外提供的时候，需要做一层包装，推荐使用getters，如果需要使用getters，则用 this.$store.getters.***

发表评论取消回复

表情：

评论列表（有 0 条评论，92人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuex使用及总结

uex小结 import Vuex from 'vuex' Vue.use(Vuex) var store = new Vuex.St...

系统管理员/ 2024年04月17日 06:01/ 0 赞/ 93 阅读

相关 vuex module总结

vuex module总结 // 创建store文件夹然后在store文件夹下创建对应的js文件 // 在该js文件中引入对应的依赖文件 imp

深藏阁楼爱情的钟/ 2023年06月30日 06:49/ 0 赞/ 45 阅读

相关 vuex 基础总结

（一）为什么要使用vuex Vuex的定义： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证

今天药忘吃喽~/ 2022年10月23日 08:03/ 0 赞/ 299 阅读

相关 vuex 基本使用总结

使用 1. 在 Vue 的单页面应用中使用，需要使用Vue.use(Vuex)调用插件。 2. 使用非常简单，只需要将其注入到Vue根实例中。 mport

古城微笑少年丶/ 2022年05月27日 00:25/ 0 赞/ 266 阅读

相关 vuex学习总结

嗯、vuex是有官网的：[https://vuex.vuejs.org/zh/][https_vuex.vuejs.org_zh] > Vuex 是一个专为 Vue.js 应

亦凉/ 2022年05月19日 09:09/ 0 赞/ 252 阅读

相关 vuex的使用总结

1.简单使用目录结构如下图所示： ![在这里插入图片描述][20181120142856737.png] 用vue-cli新建一个vue项目，引入vuex，执行：

以你之姓@/ 2022年04月15日 02:26/ 0 赞/ 282 阅读

相关 Vuex使用总结

> 最近看了下vuex的文档，也写了些总结，官方文档其实也很详细，这里做下总结。为了方便管理将store分离出来。 / 参数说明：

妖狐艹你老母/ 2022年01月20日 15:45/ 0 赞/ 368 阅读

相关关于vue，vuex总结

首先，Vue是MVVM，那么，视图需要的数据，都会放在作为Model的data里面。但是，如果在使用中需要记录的数据不需要被监听变化的话，可以在created的时候在thi

深藏阁楼爱情的钟/ 2021年12月01日 13:10/ 0 赞/ 299 阅读

相关 Vuex状态管理总结

一、什么是 Vuex 1、Vuex 是一个专为 Vue.js 应用程序开发的[状态管理模式][Link 1] 2、Vuex 采用集中式存储和管理应用中所有组件的状态

﹏ヽ暗。殇╰゛Y/ 2021年11月05日 12:56/ 0 赞/ 481 阅读

相关 vuex详细使用(总结)

vuex各个参数 state 存放状态 mutations state成员操作 getters 加工state成员给外界 actions 异步操作

末蓝、/ 2021年07月24日 18:07/ 0 赞/ 538 阅读