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. 快照(Snapshot)技术发展综述

    快照(Snapshot)技术发展综述 刘爱贵 摘要:传统数据备份技术存在备份窗口.恢复时间目标RTO和恢复时间点RPO过长的问题,无法满足企业关键性业务的数据保护需求,因此产生了数据快照技术.本文对快 ...

  2. 你真的知道final关键字吗?

    概述 final在英文中是最终的,不可更改的.在Java中final修饰变量,函数和类,就像这个单词的意思,一旦使用赋值之后不可更改. final修饰的变量不可以被改变 finalTest类 publ ...

  3. SpringMVC 中 @ControllerAdvice 注解的三种使用场景!

    @ControllerAdvice ,很多初学者可能都没有听说过这个注解,实际上,这是一个非常有用的注解,顾名思义,这是一个增强的 Controller.使用这个 Controller ,可以实现三个 ...

  4. Vuex的初探与实战

    1.背景 最近在做一个单页面的管理后台项目,为了提高开发效率,使用了Vue框架来开发.为了使各个部分的功能,独立结构更加清晰,于是就拆分了很多组件,但是组件与组件之间数据共享成了一个问题,父子组件实现 ...

  5. java到底是引用传递还是值传递?

    今天我们来讲讲一个在学习中容易误解的问题,面试中也偶尔问到,java方法调用时到底是值传递还是引用传递? 首先,请大家来做一个判断题,下面的3个问题是否描述正确 1. java基本数据类型传递是值传递 ...

  6. 【转载】通俗易懂,什么是.NET?什么是.NET Framework?什么是.NET Core?

    本文转载自:http://www.cnblogs.com/1996V/p/9037603.html [尊重作者原创,转载说明出处!感谢作者“小曾看世界”分享! ] 什么是.NET?什么是.NET Fr ...

  7. Java的内存泄露

    Java的内存泄露 1.静态集合类引起内存泄漏 像HashMap.Vector等的使用最容易出现内存泄露,这些静态变量的生命周期和应用程序一致,他们所引用的所有的对象Object也不能被释放,因为他们 ...

  8. 使用CSS3的clip-path(裁剪路径)实现剪贴区域的显示以及实例实现图片渐变

    clip-path介绍 clip-path 直译过来就是裁剪路径,使用SVG或形状定义一个HTML元素的可见区域的方法.想象一下你在Photoshop中勾勒路径的场景.MDN上是这样介绍 clip-p ...

  9. Multi Reflection (Pro Only)

    Case 14 - Double Injection in HTML Context with Double Quotes https://brutelogic.com.br/multi/double ...

  10. 高通QCC3026蓝牙音频芯片处理器介绍

    QCC3026是一款基于超低功耗架构的入门级闪存可编程蓝牙音频SoC,专为紧凑型功能优化的Qualcomm TrueWireless耳塞而设计.QCC3026旨在为我们的客户提供有助于缩短开发时间并具 ...