Vuex是什么?

官方解释:

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

简单来说,当Vue应用程序比较庞大的时候,组件里面的状态会比较多,为了方便管理某些状态,我们需要把其中一些变量抽出来,放到Vuex里面去,通过Vuex去集中的管理。

为什么要用Vuex?

官方解释:

当我们构建一个中大型的单页面程序时,Vuex可以更好地帮助我们在组件外部统一管理状态


什么是状态?

状态就是变量,状态就是组件里面的data里面的值,例如

data() {
return{
msg: 'hello world'
}
}

这个msg变量就是状态

Vuex的核心概念(State,Mutations,Getters,Action,Modules)

State

// States是唯一的数据源
// 单一状态树(意思是当我们创建了一个store实例,它里面就只有一个State,而不像我们的Vue组件,一个组件可以嵌套另一个组件,层层嵌套) const Couter = {
template: `
<div> {{ count }} </div>
`
computed: {
count () {
return this.$store.state.count
}
}
}

  

Getters

// 通过Getters可以派生出一些新的状态,【扩展】
// 通过Getters可以重新创建一个值,这个值是对state里面的状态进行修改的
const store = new Vuex.Store({
state: {
name: 'Jack'
},
getters: {
userName (state) {
return state.name + ', Hello'
}
}
}) // *****************************************************// / 使用的话,就可以在Vue组件中,通过computed来进行调用,如下
computed: {
userName() {
return this.$store.userName
}
}

  

Mutations

必须掌握
这个方式的好处就是方便管理日志,在哪里提交,怎么提交的,都会加入到日志里面,方便vux调试

// 更改Vuex中的store中的状态的唯一方法是提交mutation
const store = new Vuex.Store({
state: {
count: 1,
name: 'jack'
},
mutations: {
increment (state) { // 不带参数地修改
state.count++ // 变更状态
}
updateName (state, userName) { // 带参数地修改
state.name = userName // 变更状态
}
}
}) //**************************************************************// //在组件中,提交的用法如下
new Vue({
el: '#app',
store,
data: {
msg: 'hello world'
}
methods: {
add () {
this.$store.commit('increment')
this.$store.commit('updateName', 'Mike')
}
}
})

  

Actions

// 【扩展】
// Action可以包含任意异步操作
// 提交的是mutation,而不是直接变更状态
// 可以包含任意异步操作(解决了mutations不能异步操作的问题,就是对mutations的扩展)
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) { // 注意了,这里不是state,而是context,它能够调用mutations
context.commit('increment')
}
}
}) //**************************************************************// // 注意!!!actions在组件中的使用
methods: {
add () {
this.$store.dispatch('incrementAction') //这里用的是dispatch
}
}

Modules

// 【扩展】
// 也是扩展出来的东西,当我们的页面非常打的时候,管理的状态非常多的时候,就需要把状态拆分成一块一块的(即模块) const moduleA = {
state: {......},
mutations: {......},
actions: {......},
getters: {......}
} const moduleB = {
state: {......},
mutations: {......},
actions: {......},
getters: {......}
} const moduleC = {
state: {......},
mutations: {......},
actions: {......},
getters: {......}
}

下图是官网的图,Vuex的运行框架大致如下所示:

----------END-----------

【Vuex】vuex基本介绍与使用的更多相关文章

  1. 解决IE下页面空白或者报错:[vuex] vuex requires a Promise polyfill in this browser

    [vuex] vuex requires a Promise polyfill in this browser 上述错误的原因是不支持 Promise 方法,导致页面出现空白无法加载. 解决方法如下: ...

  2. Error: [vuex] vuex requires a Promise polyfill in this browser. 与 babel-polyfill 的问题

    Error: [vuex] vuex requires a Promise polyfill in this browser. 与 babel-polyfill 的问题 采用最笨重的解决方案就是npm ...

  3. vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser错误

    ie浏览器下报错 vue刚搭建的项目,在谷歌浏览器能够正常访问,但是在ie11等ie浏览器下无法显示页面,打开控制台查看无报错信息,打开仿真一栏,提示[vuex] vuex requires a Pr ...

  4. Vuex与axios介绍

    Vuex集中式状态管理里架构 axios (Ajax) Vuex集中式状态管理架构 -简单介绍: vuex是一个专门为Vue.js设计的集中式状态管理架构. 我们把它理解为在data中需要共享给其他组 ...

  5. vuex的使用介绍

    1.vuex是什么? vuex是一个专为vue.js应用程序开发的状态管理模式(它采用集中式存贮管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化). 2.vuex的核心概念? ...

  6. vuex的简单介绍

    .vuex的定义 )Vuex 是一个专门为 Vue.js 应用程序开发的状态管理模式,使用插件的形式引进项目中 )集中存储和管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 ...

  7. 初识vuex vuex 的基本用法

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

  8. IE11报错:[vuex] vuex requires a Promise polyfill in this browser的问题解决

    昨天其他同事反馈IE浏览器无法打开线上的应用,查看了一下,发现控制台报以下错误: 发现和vuex有关系,去其官网查看了一下文档,发现关于IE浏览器的Promise的问题: 在vue-cli(webpa ...

  9. IE报错:[vuex] vuex requires a Promise polyfill in this browser.

    使用的是vue2.0版本 IE报错提醒: 导致原因:使用了 ES6 中用来传递异步消息的的Promise,而IE的浏览器不支持 解决办法: 1.安装babel-polyfill模块,babel-plo ...

  10. vue项目在IE下报 [vuex] vuex requires a Promise polyfill in this browser问题

    如下图所示,项目在IE11下打开报错: 因为使用了 ES6 中用来传递异步消息的的Promise,而IE浏览器都不支持. 解决方法: 第一步: 安装 babel-polyfill . babel-po ...

随机推荐

  1. BZOJ_4518_[Sdoi2016]征途_斜率优化

    BZOJ_4518_[Sdoi2016]征途_斜率优化 Description Pine开始了从S地到T地的征途. 从S地到T地的路可以划分成n段,相邻两段路的分界点设有休息站. Pine计划用m天到 ...

  2. linux内核参数注释与优化

    目录 1.linux内核参数注释 2.两种修改内核参数方法 3.内核优化参数生产配置 参数解释由网络上收集整理,常用优化参数对比了网上多个实际应用进行表格化整理,使查看更直观. 学习linux也有不少 ...

  3. 自行实现 dotnet core rpc

    前言 小李:“胖子,上头叫你对接我的数据好了没有?” 胖子:“那是你的事,你都不提供数据源,我咋接?” 小李:“你想要什么样的数据源?” 胖子:“我想要一个调用简单点的!” 小李:“我这个数据源是在l ...

  4. 供应链金融&区块链应用

    现代管理教育对供应链的定义为“供应链是围绕核心企业,通过对商流,信息流,物流,资金流的控制,从采购原材料开始,制成中间产品以及最终产品,最后由销售网络把产品送到消费者手中的将供应商,制造商,分销商,零 ...

  5. 【公告】关于8.8MIP组件审核平台故障的说明

    故障通报 2017 年 8 月 8 日 下午 14:11,由于机器故障原因,MIP 组件管理平台暂时无法提供服务. 2017 年 8 月 8 日 下午 16:46, 故障已解决.MIP 组件管理平台服 ...

  6. JDK--box和unbox

    目录 什么是装箱.拆箱 基本类型和包装类型 为什么会有基本类型? 为什么还要有包装类型 两者区别 两者互转 源码分析(JDK1.8版本) valueOf方法 1.Integer.Short.Byte. ...

  7. Docker常见故障

    — Docker虚拟化故障 — Docker虚拟化主要有三类故障: 应用故障:应用执行状态与预期不一致. 容器故障:无法正确创建.停止.更新容器等. 集群故障:集群创建失败.更新失败.无法连接等. — ...

  8. SpringBoot进阶教程(二十八)整合Redis事物

    Redis默认情况下,事务支持被禁用,必须通过设置setEnableTransactionSupport(true)为使用中的每个redistplate显式启用.这样做会强制将当前重新连接绑定到触发m ...

  9. Spring Boot Web 自定义注解篇(注解很简单很好用)

    自从spring 4.0 开放以后,可以添加很多新特性的注解了.使用系统定义好的注解可以大大方便的提高开发的效率. 下面我贴一段代码来讲解注解: 通过小小的注解我们支持了以下功能: 使 spring. ...

  10. Asp.Net Core 轻松学-正确使用分布式缓存

    前言     本来昨天应该更新的,但是由于各种原因,抱歉,让追这个系列的朋友久等了.上一篇文章 在.Net Core 使用缓存和配置依赖策略 讲的是如何使用本地缓存,那么本篇文章就来了解一下如何使用分 ...