首页 | 滚动 | 财经 | 国内 | 乐活 | 娱乐 | 科技 | 教育 | 体育 | 时尚 | 汽车 | 资讯 | 热点 | 资讯 |

 

Vuex详解 彻底搞懂Vuex 知识推文
发布时间：2022-12-01 10:44:08 文章来源：
一 Vuex是什么?为什么要用它?vuex官方解释Vuex 是一个专为 Vue js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有

一.Vuex是什么?为什么要用它?

vuex官方解释

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

大家可以思考一下，组件之间的传值有哪些?有父子通讯，兄弟组件通讯......但是传参对于多层嵌套就显得非常繁琐，代码维护也会非常麻烦。因此vuex就是把组件共享状态抽取出来以一个全局单例模式管理，把共享的数据函数放进vuex中，任何组件都可以进行使用。

二.什么时候我们该使用它?

Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

三.安装

方法一：

在脚手架 创建项目时勾选vuex的选项系统会自动创建

方法二：npm 或Yarn安装

npm install vuex@next --save

yarn add vuex@next --save

四.配置

如果采用脚手架方式进行创建，无需任何操作，可以忽略此步骤

新建store文件->index.js，进行如下配置，在main.js中进行引入

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

//数据，相当于data

state: {

},

getters: {

},

//里面定义方法，操作state方发

mutations: {

},

// 操作异步操作mutation

actions: {

},

modules: {

},

})

main.js中

五.核心概念

vuex中一共有五个状态 State Getter Mutation Action Module 下面进行详细讲解

5.1 State

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

在vuex中state中定义数据，可以在任何组件中进行调用

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

//数据，相当于data

state: {

name:"张三",

age:12,

count:0

},

})

调用：

方法一：

在标签中直接使用

方法二：

this.$store.state.全局数据名称

方法三：

从vuex中按需导入mapstate函数

import { mapState } from "vuex";

注意：当前组件需要的全局数据，映射为当前组件computed属性

5.2 Mutation

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

在vuex中定义：

其中参数state参数是必须的，也可以自己传递一个参数，如下代码，进行计数器的加减操作，加法操作时可以根据所传递参数大小进行相加，减法操作没有传参每次减一

在组件中使用：

定义两个按钮进行加减操作

方法一：

注意：使用commit触发Mutation操作

methods:{

//加法

btn(){

this.$store.commit("addcount",10) //每次加十

}

//减法

btn1(){

this.$store.commit("reduce")

}

}

方法二：

使用辅助函数进行操作，具体方法同上

5.3 Action ——进行异步操作

Action和Mutation相似，Mutation 不能进行异步操作，若要进行异步操作，就得使用Action

在vuex中定义：

将上面的减法操作改为异步操作

在组件中使用：

方法一：

直接使用 dispatch触发Action函数

this.$store.dispatch("asynAdd")

方法二：

使用辅助函数

5.4 Getter

类似于vue中的computed，进行缓存，对于Store中的数据进行加工处理形成新的数据

具体操作类似于前几种，这里不做具体说明

5.5 Modules

当遇见大型项目时，数据量大，store就会显得很臃肿

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

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

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

关键词：

乐活HOT

  • 四川正式启动三级保供电调控措施保障民生用电 优化各类电源发电计划
    四川正式启动三级保供电调控措施

    继8月11日、14日连续两次召开电力保供工作紧急视频会议后，8月15日，四川再次召开电力保供调度会。记者从会上获悉，预计全省最大用电负荷将

  • 前7月四川能源项目累计完成投资493亿元 油气类项目完成投资159亿元
    前7月四川能源项目累计完成投资4

    今年以来，四川积极扩大能源领域有效投资，前7月能源项目累计完成投资493亿元、同比增长4%。8月15日，省能源局相关负责人介绍，前7月煤炭类

  • 四川加力加劲坚决遏制事故多发频发态势 有效提升预报预警水平
    四川加力加劲坚决遏制事故多发频

    8月15日，全省防汛减灾、森林草原防灭火工作电视电话会议召开，深刻汲取彭州8·13山洪灾害教训，分析研判当前形势，安排部署下一步重点工作

  • 四川攀枝花推动打造职业能力建设工作品牌 提供人才广阔展示舞台
    四川攀枝花推动打造职业能力建设

    8月9日，攀枝花技师学院实习工厂里，焊花四溅，机器声此起彼伏。身穿工作服的教师周树春，在一间间操作室里进进出出，指导学生们焊接。过去

  • 上半年湖南物流需求平稳增长行业运行平稳 快递业务量完成10.3亿件
    上半年湖南物流需求平稳增长行业

    记者从省发改委获悉，上半年全省物流需求平稳增长，行业运行总体平稳。全省社会物流总额64096 2亿元，同比增长4 4%;全省物流业总收入为2270

  • 湖南各地工业企业忙生产全力以赴稳增长 生产线全力运转
    湖南各地工业企业忙生产全力以赴

    在全球最大地下工程装备制造基地，掘进机生产计划已排到年底;千亿级工程机械产业园区边建设边生产，打造智能制造标杆……时已立秋，三湘大

  • 江西赣州医疗卫生服务体系进一步完善 完善“三医”联动机制
    江西赣州医疗卫生服务体系进一步

    上犹县水岩乡卫生院医生蔡昌才驱车前往金盆村为村民骆运招治病。以往，每月去医院就诊不仅路途远，还要排队。这几年有了家庭医生后，直接送

  • 江西坚持问题导向推进药品安全专项整治走深走实 持续完善投诉举报渠道
    江西坚持问题导向推进药品安全专

    今年2月以来，省药监局深入开展药品安全专项整治行动，坚持问题导向，以严厉打击违法犯罪行为、全面排查风险隐患为手段，推进专项整治行动

  • 江西九江多举措为创业者营造良好创业贷款环境 就业创业事项一次性办
    江西九江多举措为创业者营造良好

    没想到，现在直接在窗口就能办理，真是太方便了。蒋琼在九江市经营一家造型工作室，近期有意扩大生意规模，需要资金周转。她带齐资料来到九

  • 上半年江西新余全市外贸进出口总值同比增长84.3% 外贸主体活力持续激发
    上半年江西新余全市外贸进出口总

    记者从新余海关获悉，今年上半年，新余市外贸取得了较好成绩，全市外贸进出口总值184 3亿元，同比增长84 3%，高出全国平均水平74 9个百分点

  • 南昌高新区多举措推动重点项目建设加速跑 完善重大重点项目推进机制
    南昌高新区多举措推动重点项目建

    作为南昌市第二季度集中开工的重大项目之一，南昌数谷产业园项目总投资100亿元，计划2024年5月完工交付使用，拟引进字节跳动、华为(南昌)工

  • 安徽淮南颁发优才卡落实高层次人才服务保障制度
    安徽淮南颁发优才卡落实高层次人

    淮南市向中国工程院院士、安徽理工大学校长袁亮颁发了第一张淮南市高层次人才优才卡。为深化我为人才办实事实践活动，落实高层次人才服务保

  • 宿州市埇桥区细化工作举措筑牢防汛“安全堤”
    宿州市埇桥区细化工作举措筑牢防

    连日来，宿州市埇桥区不断细化各项工作举措，压实防汛各项责任，提升应急救援保障能力，筑牢防汛安全堤。目前，该区防汛物资已储备到位，全

  • 安徽无为市“交地即交证”优化营商环境政策正式落地
    安徽无为市“交地即交证”优化营

    近日，无为市自然资源和规划局、无为市福渡镇人民政府在无为润峰中海置业有限公司项目部现场举行交地即交证颁证仪式，标志该市交地即交证优

  • 安徽全椒县推动农村寄宿制学校试点工作
    安徽全椒县推动农村寄宿制学校试

    设施齐全的卫生食堂、水冲式的独立卫生间、楼道墙体粉刷一新的宿舍……走进安徽省全椒县武岗学校，已经运行满一年的农村特色寄宿制学校成果

娱乐LOVE