vue 状态管理 一、状态管理概念和基本结构
系列导航
vue 状态管理 三、Mutations和Getters用法
一、状态管理是什么?
可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用。
二、 状态管理图例
三Vuex核心的概念:
1、State
State单一状态树,就是把一些好多组件都需要的变量放到统一的位置定义,变量变更后所有调用它的地方数据都会变更。
2、Getters
类似于计算属性
3、Mutation
store状态的更新唯一方式:提交Mutation
4、Action
Action类似于Mutation, 但是是用来代替Mutation进行异步操作的。
5、Module
Module是模块的意思, 为什么在Vuex中我们要使用模块呢?
Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.当应用变得非常复杂时,store对象就有可能变得相当臃肿.为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutation、action、getters等
后面的章节开始对每个概念进行演示。
四、基本结构
文件:src/store/index.js
import {createStore} from 'vuex'
export default createStore({
state: {},
mutations: {},
getters: {},
actions: {},
modules: {}
})
资源丰富的的网盘资源:网盘资源大全! 推荐一个适合零基础学习SQL的网站:不用安装数据库,在线轻松学习SQL!