首页 > 其他分享 >Vuex笔记

Vuex笔记

时间:2023-04-13 15:11:56浏览次数:42  
标签:函数 getters 笔记 state mutation 模块 Vuex store

Vuex有state,mutation,actions,getter四种

用法如下:

1、state(存储数据):

state{

count: 0 //全局数据

}

获取state数据两种方式:

  1. this.$store.state.全局数据名称
  2. 利用辅助函数mapstate

Import {mapState} from “vuex”

computed: {

…mapstate([“全局数据名称”])

}

2、mutation(更改state数据):

mutation: {

执行函数;

}

获取mutation两种方式:

  1. methods: {

this.$store.commit(“执行函数名”)

}

  1. 导入 import {mapMutation} from “vuex”

methods: {

…mapstate(“执行函数名”)

}

3、actions(用于异步操作):

action: {

执行函数

}

Eg:  actions: {

        addAsync(context) {

          setTimeout (() => {

//必须通过context.commit( )触发某个mutation才行

            context.commit('add')

          },1000)

        }

      }

获取actions两种方式:

  1. methods: {

this.$store.dispatch(“函数名”)

}

  1. import {mapAction} from “vuex”

methods: {

…mapAction(“函数名”)

}

4、getter(对store的数据进行加工处理,类似计算属性)

getters{

执行函数

}

获取getters两种方式:

  1. this.$store.getters.函数名;
  2. import {mapGetters} from “vuex”

computed: {

…mapGetters([“函数名”])

二、Vuex中的模块化-Module

1、为什么会有模块化?

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

这句话的意思是,如果把所有的状态都放在State中,当项目变得越来越大的时候,vuex会变得越来越难以维护。又有了vuex的模块化

2、模块化的简单应用

应用

定义两个模块usersetting

User中管理用户的状态token

Setting中管理应用的名称name

定义child-b组件,分别显示用户的token和应用名称name

请注意:此时要获取子模块的状态需要通过$store.state.模块名字.属性名来获取

看着获取有点麻烦,我们可以通过之前学过的getters来改变一下

请注意:这个getters是根级别的getters哦

(ps:getters在main.js中引用)

通过mapGetters引用

(ps:mapGetters在子组件child-b中引用)

3、模块化中的命名空间

命名空间namespaced

这里注意理解

默认情况下,模块内部的action、mutation和getter是注册在全局命名空间的——这样使得多个模块能够对同一mutation或action作出相应。

这句话的意思是刚才的user模块还是setting模块,它的action、mutation和getter其实并没有区分,都可以直接通过全局的方式调用,如

通过mapMutations调用

但是,如果我们想保证内部模块的高封闭性,我们可以采用namespaced来进行设置

高封闭性?可以理解成**一家人如果分家了,此时,你的爸妈可以随意的进出分给你的小家,你绝得自己没什么隐私了,我们可以给自己的房门加一道锁(命名空间namespaced),你的父母再也不能进出你的小家了**

使用带命名空间的模块action/mutations

方案1:直接调用——带上模块的属性名路径

方案2:辅助函数——带上模块的属性名路径

方案3:createNamespacedHelpers创建基于某个命名空间辅助函数

标签:函数,getters,笔记,state,mutation,模块,Vuex,store
From: https://www.cnblogs.com/tangchuye/p/17314910.html

相关文章

  • Cadence应用笔记:调整栅格
    说明栅格是在设计中非常常用的工具,修改栅格大小和显示可以通过如下操作:空白处右键选择设置Grid设置层叠各层的栅格大小或者全局大小通过该按键可以隐藏或者显示栅格......
  • CS231N assignment 2#3 _ dropout 学习笔记 & 解析
    dropout定义&作用&基本实现如课程所说,dropout最大的意义在于防止过拟合.我们还记得,dropout在网络架构上介于激活函数之后,下一层输入之前.想法很简单,就是将隐含层的某些数据屏蔽掉,直接从以输入到下一层,概率为p. 需要注意的是,dropout是仅针对训练而言的,测试......
  • Python程序笔记20230305
    n以内能被m整除的数的和、积最初版本计算指定数字内所有偶数的和n=int(input("请输入指定的n:"))i=0mysum=0whilei<=n: ifi%2==0: mysum=mysum+ii=i+1print(f"{n}以内的所有偶数的和是{mysum}")print("{0}以内的所有偶......
  • 关于免费笔记软件和免费同步,长文,保存观看
    前言这段可以略过最早使用的笔记软件(应该说是网页摘录软件)是网文快捕CyberArticle,但不停换电脑后当年保存的资料基本都遗失了,那可是我翻阅众多涩涩网站的精华文章。后来网文快捕推出了在线笔记软件“为知笔记”,经历了为知笔记收费、被收购、大升级,分享需审核等一系列改变,虽然......
  • 学习笔记399—彻底明白ip地址,区分localhost、127.0.0.1和0.0.0.0
    彻底明白ip地址,区分localhost、127.0.0.1和0.0.0.0通俗的了解IP地址是什么对于IP地址,大家并不陌生,特别是在网络访问中我们会经常使用到(平时对域名如百度的www.baidu.com的访问,本质就是对域名所绑定的IP地址的访问),那么IP地址是什么呢?首先,我们要知道网络中的相互访问其实就是在......
  • CS231N assignment 2 _ normalization 学习笔记 & 解析
    预警:本次内容不算多,但数学推导较复杂Normalization归一化的意义之前内部的权重没有做过标准化.实际上如果能标准化,可以提升训练效果,甚至可以提升精度(虽然不大).设立专门的batch/layernormalization层的意义在于:梯度更加规范对于学习率(可以更高),初始化权重等......
  • EXCEL笔记
    1.EXCEL_VBA常用语句300句http://ishare.iask.sina.com.cn/f/buTg9YmOAZ3.html      2.EXCEL使用技巧Word/PPT/Excel/PDF格式互转方法https://baijiahao.baidu.com/s?id=1591720369258445486&wfr=spider&for=pc3.使用if函数进行判断https://mbd.baidu.com/newspage/data/......
  • Vuex module之间调用与读值
    对于模块内部的mutation和getter,接收的第一个参数是模块的局部状态对象state对于模块内部的action,局部状态通过context.state暴露出来,根节点状态则为context.rootState使用全局state和getter,rootState和rootGetters会作为第三和第四参数传入getter,也会通过conte......
  • 学习笔记397—Docker数据管理
    Docker有两种数据管理的方式数据卷:容器内数据直接映射到本地主机环境;数据卷容器:使用特定容器维护数据卷.数据卷数据卷是一个可供容器使用的特殊==目录==,它将主机操作系统目录直接映射进容器数据卷的特性:可以在容器之间共享和重用,容器间传递数据将变得高效与方......
  • 18.四数之和——学习笔记
    题目:给你一个由n个整数组成的数组nums,和一个目标值target。请你找出并返回满足下述全部条件且不重复的四元组[nums[a],nums[b],nums[c],nums[d]](若两个四元组元素一一对应,则认为两个四元组重复):0<=a,b,c,d<na、b、c和d互不相同nums[a]+nums[b]+nums[c......