今天看啥  ›  专栏  ›  貓咪是大王

Vuex

貓咪是大王  · 简书  ·  · 2019-09-16 20:28
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




原文地址:访问原文地址
快照地址: 访问文章快照