Vuex(笔记)

版权声明:转载请注明出处 https://blog.csdn.net/tangkthh/article/details/89710535

Vuex

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

“单向数据流”理念的极简示意

state,驱动应用的数据源;

view,以声明方式将 state 映射到视图;

actions,响应在 view 上的用户输入导致的状态变化。

当多个组件共享状态时,单向数据流的简洁性很容易被破坏:

    1、多个视图依赖于同一状态:传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力;

    2、来自不同视图的行为需要变更同一状态:我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝;

Vuex 核心思想

Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)

Vuex基础概念

State

vuex的单一状态树,使用一个对象就包含了应用层的所有状态;state是vuex自己维护的一份状态数据,通过操作去页面渲染;

扫描二维码关注公众号,回复: 6183697 查看本文章

Getters

有时候我们需要从 store 中的 state 中派生出一些状态,getters属性主要是对于state中数据的一种过滤;

Actions

对于store中数据的修改操作动作在action中提交;

Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation;

Module

因为随着后面的业务逻辑的增多,把vuex分模块的开发会使得代码更加简洁清晰明了,比如登录一个模块,产品一个模块,这样后面改动起来也简单嘛;

代码实践

安装依赖

npm install vuex

main.js加载

页面使用

1、读取store里的值

this.$store.state.字段名

如果有moudle的话,假设叫 login,那么取值又要变了,加上module

this.$store.state.login.mobile

2、发起操作请求

this.$store.dispatch('action中的方法名' , '参数');

参数你可以随便传json

3、getters的用法

this.$store.getters.filterDoned

filterDoned 是在todo 里写的一个getters方法,就这么调用噢

猜你喜欢

转载自blog.csdn.net/tangkthh/article/details/89710535