位置: IT常识 - 正文

Vuex的五个属性及使用方法。(vuex的五个属性及使用方法 简书)

编辑:rootadmin
Vuex的五个属性及使用方法。 Vuex介绍

推荐整理分享Vuex的五个属性及使用方法。(vuex的五个属性及使用方法 简书),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuex的五个属性是什么意思,vuex的五个属性怎么读,vuex的五个属性及使用方法 简书,vuex的五个属性及使用方法 简书,vuex的五个属性在组件中一般放在哪里使用?,vuex的五个属性及作用,vuex的五个属性是什么意思,vuex的五个属性是什么意思,内容如对您有帮助,希望把文章链接给更多的朋友!

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

state 数据存贮

getter state的计算属性

mutation 更改state中状态的逻辑 同步操作

action 提交mutation 异步操作

model 模块化

state基本数据,存储变量

使用方法:

可以通过this.$store.state 获得Vuex的state,如下:

// src/store/indexconst store = new Vuex.Store({state: {number:66}})const app = new Vue({//..store,computed: {count: function(){return this.$store.state.number}},// this.$store.state.number})// 每当 store.state.number 发生变化, 都会重新求取计算属性,并且触发更新相关联的 DOM。

mapState辅助函数

// 在需要使用的文件里import { mapState } from 'vuex'export default {// ...methods:{...mapState({ myNumber: 'number' }),}}mutations

提交mutation是更改Vuex中的store中的状态的唯一方法。

mutation必须是同步的,如果要异步需要使用action。

每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。(提交荷载在大多数情况下应该是一个对象),提交荷载也可以省略的。

const store = new Vuex.Store({state: {number: 1},mutations: {//无提交载荷Submit(state) {state.number++}//提交载荷SubmitN(state, payload) {state.number += payload.num}}})

使用方法;

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

//无提交载荷this.$store.commit('Submit')//提交载荷this.$store.commit('SubmitN', {num: 66})Vuex的五个属性及使用方法。(vuex的五个属性及使用方法 简书)

mapMutations 辅助函数

与其他辅助函数类似,你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation,或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

// 在需要使用的文件里import { mapMutations } from 'vuex'export default {    methods:{...mapMutations({ mySubmit: 'Submit', mySubmitN: 'SubmitN'}),}actions

Action 类似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接变更状态。

Action 可以包含任意异步操作。

const store = new Vuex.Store({state: {number: 0},mutations: {submit (state) {state.number++}},actions: {submit (context) {setInterval(function(){context.commit('submit')}, 1000)}}})

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

使用方法:

分发actions,即Action 通过 store.dispatch 方法触发:

this.$store.dispatch('increment')

mapActions辅助函数

你在组件中使用 this.$store.dispatch('xxx') 分发 action,或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

import { mapActions } from 'vuex'export default {//..methods: {...mapActions(['submit']),...mapActions({add: 'submit'})}}Modules

使用单一状态树,导致应用的所有状态集中到一个很大的对象。但是,当应用变得很大时,store 对象会变得臃肿不堪。

为了解决以上问题,Vuex 允许我们将 store 分割到模块(module)。每个模块拥有自己的 state、mutation、action、getters、甚至是嵌套子模块——从上至下进行类似的分割:

import Vue from 'vue'import Vuex from 'vuex'import getters from './getters'import app from './modules/app'import settings from './modules/settings'import user from './modules/user'Vue.use(Vuex)const store = new Vuex.Store({modules: {app,settings,user},getters})export default store

使用模块化的state,mutations,action,需在使用方法前加模块名

如:

this.$store.state.user.number

this.$store.commit(‘user/xxx’)

this.$store.dispatch(‘user/xxx’)

gettersimport Vue from 'vue'import Vuex from 'vuex'import getters from './getters'Vue.use(Vuex)const store = new Vuex.Store({getters})export default storeconst getters = {sidebar: state => state.app.sidebar,device: state => state.app.device,token: state => state.user.token,username: state => state.user.username,empno: state => state.user.empno}export default getters

使用:this.$store.grtters.sidber , this.$store.grtters.device ,以此类推

mapGetters

import { mapGetters } from 'vuex'// mapGetters的作用:把getters映射为计算属性computed: {...mapGetters(['getPartList']),// ...mapGetters({// calcList: 'getPartList'// }),// calcList () {// // 注意:获取getters的值,不需要加括号(当属性使用)// return this.$store.getters.getPartList// },}
本文链接地址:https://www.jiuchutong.com/zhishi/297665.html 转载请保留说明!

上一篇:Squarespace 和 WordPress 的区别

下一篇:[毕业设计]2022-2023年最新最全计算机专业毕设选题推荐汇总(毕业设计2022年幼儿园)

  • APP活动运营,其实你一直在“骚扰”用户?(app的运营计划)

    APP活动运营,其实你一直在“骚扰”用户?(app的运营计划)

  • 拼多多商家版怎么删除直播视频(拼多多商家版怎么找人工客服聊天)

    拼多多商家版怎么删除直播视频(拼多多商家版怎么找人工客服聊天)

  • 华为程序准备中打不开(华为程序准备中是什么意思怎么能解开)

    华为程序准备中打不开(华为程序准备中是什么意思怎么能解开)

  • 图片查看器提示内存不足(图片查看器提示彩色打印)

    图片查看器提示内存不足(图片查看器提示彩色打印)

  • 300dpi是多少像素尺寸(300dpi是多少像素/厘米)

    300dpi是多少像素尺寸(300dpi是多少像素/厘米)

  • 淘宝买家用手机怎么看周月(淘宝买手机有风险吗)

    淘宝买家用手机怎么看周月(淘宝买手机有风险吗)

  • vivo oppo是一家吗(vivo手机哪款性价比高 质量好)

    vivo oppo是一家吗(vivo手机哪款性价比高 质量好)

  • 左对齐快捷键(左对齐快捷键ctrl加什么)

    左对齐快捷键(左对齐快捷键ctrl加什么)

  • 拼多多店铺审核要多久(拼多多店铺审核中可以发布商品吗)

    拼多多店铺审核要多久(拼多多店铺审核中可以发布商品吗)

  • qq标识有哪些(qq上的标识有哪几种)

    qq标识有哪些(qq上的标识有哪几种)

  • 为什么微信领不了红包账号异常(为什么微信领不了红包封面)

    为什么微信领不了红包账号异常(为什么微信领不了红包封面)

  • 爱奇艺pc网页端是什么(爱奇艺pc网页端打不开)

    爱奇艺pc网页端是什么(爱奇艺pc网页端打不开)

  • 抖音小店扣点多少(2021抖音小店平台扣点是多少)

    抖音小店扣点多少(2021抖音小店平台扣点是多少)

  • 华为荣耀9x忘记锁屏密码怎么办(华为荣耀9x忘记密码怎么恢复出厂设置)

    华为荣耀9x忘记锁屏密码怎么办(华为荣耀9x忘记密码怎么恢复出厂设置)

  • 多媒体中的媒体元素包括(多媒体中的媒体是指____,如数字、文字等)

    多媒体中的媒体元素包括(多媒体中的媒体是指____,如数字、文字等)

  • 华为mate30带来电闪光灯吗(华为mate30来电背景怎么设置)

    华为mate30带来电闪光灯吗(华为mate30来电背景怎么设置)

  • qq音乐怎么注销qq号(qq音乐怎么注销登录)

    qq音乐怎么注销qq号(qq音乐怎么注销登录)

  • 怎样把文件发送到qq里(怎样把文件发送到微信)

    怎样把文件发送到qq里(怎样把文件发送到微信)

  • 抖音怎么视频和图片一起发(抖音怎么视频和图片一块发)

    抖音怎么视频和图片一起发(抖音怎么视频和图片一块发)

  • 手机qq说说id怎么找(qq说说id在哪)

    手机qq说说id怎么找(qq说说id在哪)

  • ios12.3更新失败(ios12.1无法更新)

    ios12.3更新失败(ios12.1无法更新)

  • 查找我的iphone怎么添加设备(查找我的iphone怎么关)

    查找我的iphone怎么添加设备(查找我的iphone怎么关)

  • 加入黑名单的电话号码怎么恢复(加入黑名单的电话来电有提示吗)

    加入黑名单的电话号码怎么恢复(加入黑名单的电话来电有提示吗)

  • 拼多多试用后要归还吗(拼多多试用后要运费么)

    拼多多试用后要归还吗(拼多多试用后要运费么)

  • 华为手机的功能悬浮窗在哪里关闭(华为手机的功能键怎么调出来)

    华为手机的功能悬浮窗在哪里关闭(华为手机的功能键怎么调出来)

  • 如何在Mac中安装Leopard以来提高工作效率(macbook怎么安装macos)

    如何在Mac中安装Leopard以来提高工作效率(macbook怎么安装macos)

  • win10平板模式怎么用(win10平板模式怎么显示桌面)

    win10平板模式怎么用(win10平板模式怎么显示桌面)

  • 买房缴纳契税需要交税吗
  • 公司一般户需要年检吗
  • 损益平准基金
  • 普通发票专用发票每张最高限额
  • 2019年所得税汇算清缴政策
  • 独立核算自负盈亏和统负盈亏怎么选
  • 软件企业即征即退账务处理
  • 弃置费用调整
  • 联合开发合作模式
  • 支付结算有哪些工具
  • 以非现金资产清偿债务的方式下,债权人
  • 加工费发票可以不开数量吗
  • 递延所得税当期所得税费用
  • 按税收规定计算的扣除额公益性捐赠
  • 应付账款多付了
  • 企业所得税季度纳税申报表 a类
  • 车辆租赁费用标准
  • 如果没有预缴就开票会怎样?
  • 交强险是不是只要有发票就可以报销
  • 固定资产清查怎么开展
  • mac显示器颜色不正常
  • 商标转让过程中公司转让
  • 喜加一平台
  • 销售免税农产品进项税可以抵扣吗
  • PHP:mcrypt_generic_end()的用法_Mcrypt函数
  • 前端gui
  • 简明易懂的
  • 库存商品损失怎么做账
  • 毕业设计2022年幼儿园
  • linux嵌入式开发教程
  • java htmlparser
  • laravel后端
  • 自费出版违法吗
  • 带折扣的发票如何入账
  • python中insert函数怎么用
  • 房地产预缴增值税计税依据
  • 个人收入如何开出发票
  • 工会经费与教育经费比例
  • access untagged
  • sql2005备份数据库
  • 企业存续情况
  • 开发票该怎么操作?
  • 固定资产的核算内容包括
  • 承包费会计处理
  • 车辆置换差价账务处理
  • 外币支付账户
  • 无偿划转资产需要挂其他应收款吗
  • 固定资产怎么入费用
  • 新会计准则适用企业
  • 社保申报工伤怎么操作
  • 固定资产清理产生的收入计入
  • 银行信用贷款发放邮件后多久到账
  • 收付转三种凭证的限制类型不同所以限制科目也不同
  • 序时账是明细账吗
  • Mysql使用教程
  • jdbc数据库连接步骤
  • windows预览版计划
  • linux top命令详解内存过高查询
  • ahqinit.exe是什么进程 ahqinit是安全的进程吗
  • directx?
  • windows 8.1 with update (multiple editions)
  • rnbrcache.exe是什么意思
  • win7系统计算机管理在哪里
  • linux源于
  • win10系统如何查看
  • unity3d读取gis数据
  • nodejs可以直接操作数据库
  • jquery操作dom
  • sequelize join
  • 批处理列出文件名
  • html5webview交互
  • script标签的defer和async
  • html购物网站
  • eclipse导入server
  • js继承的方式
  • bootstrap要学到什么程度
  • 原生js实现移动站点头部搜索栏背景色透明度变化
  • python中的字符串常量
  • 非营利组织税务处理
  • 怎么注册山东省采购网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设