Vuex

Vuex是什么?
  • 专为Vue.js应用程序开发的状态管理模式
  • 集中管理所有组件的状态,
  • 可以存放组件中的公有数据
  • 所有组件都能获取Vuex中的数据并修改
安装Vuex

首先我们通过命令行vue init webpack webVue(可以用npm install -g vue-cli 安装vue-cli 脚手架或者用我前面说的vue-cli3脚手架创建也行),新建一个叫webVue的新项目
安装Vuex到本地:npm install vuex --save (vue cli 3 中搭建脚手架预设时选择了“vuex”后便安装了vuex,可跳过此步)
运行项目:npm run dev

项目启动成功后,我们在项目的src文件夹下新建文件夹store,并在该文件夹下新建index.js文件,这个文件用于创建vuex实例,配置如下:

import Vue from 'vue'//引入vue
import Vuex from 'vuex'//引入vuex

//使用 vuex
Vue.use(Vuex);

// 创建vuex实例 并保存到变量store中
const store = new Vuex.Store({
    
})

export default store //导出store

在main.js中引入该文件,并在vue实例全局引入store对象;

main.js
开始编写Vuex业务代码
  • State:存储状态(变量),驱动应用的数据源;

我们保存的数据就保存在这,可以在页面通过this.$store.state来获取我们定义的数据;


index.js

HelloWorld.vue
  • Getters:可以认为是 store 的计算属性

getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,这里通过定义Vuex的Getters来获取,Getters可以用来监听state中值的变化,返回计算后的结果。


HelloWorld.vue
index.js
页面显示
Devtools工具显示
  • Mutations:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

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


我们在HelloWorld.vue中添加两个按钮,加1跟减1

index.js

页面

可以通过第二个参数控制每次加几


每次点击添加会加2
  • Actions:类似于 mutation,不同在于Action 提交的是 mutation,而不是直接变更状态,可以包含任意异步操作。

简单来说二者区别就是 mutation是同步执行,专注于修改State,理论上是修改State的唯一途径;Action是异步,且不能直接操作State。


index.js

HelloWorld.vue

点击页面效果一样,这里我们依然可以传两个参数


HelloWorld.vue

index.js
  • 辅助函数:mapState、mapGetters、mapActions

这是官方给的更简单的方法:


辅助函数
什么情况下使用Vuex?

适用于中大型的单页面应用,需要考虑如何把组件的共享状态提取出来,一亿个全局单例模式管理,不管在那个组件,都能获取状态/触发行为,解决方法如下:
①多个视图使用同一状态:
传参的放大对于多层嵌套的组件将会很繁琐,并对兄弟组件间的状态传递无能为力
②不同视图需要变更同一状态:
采用父子组建直接引用或者通过事件来变更和同步状态的多份拷贝,通常会导致无法维护的代码

Vuex跟全局对象有什么不同?

①Vuex状态存储是响应式的
当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应的得到高效更新。
②不能直接改变store中的状态
改变store中的状态的唯一途径就是显式地提交,方便我们跟踪每一个状态的变化

感谢:https://vuex.vuejs.org/zh/
https://my.oschina.net/wangnian/blog/2055631
https://baijiahao.baidu.com/s?id=1618794879569468435&wfr=spider&for=pc
https://www.cnblogs.com/chinabin1993/p/9848720.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 3,018评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,219评论 0 6
  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 2,099评论 3 3
  • 目录 - 1.什么是vuex? - 2.为什么要使用Vuex? - 3.vuex的核心概念?||如何在组件中去使用...
    我跟你蒋阅读 4,209评论 4 51
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,747评论 7 61

友情链接更多精彩内容