前言
本文章结合VUE核心技术-尚硅谷的63-75集做的归纳总结。
这里发现教程的 readme.md 已经将知识点整理好了,我在做了一些个人风格化的修改。
vuex是什么
github站点: https://github.com/vuejs/vuex
在线文档: https://vuex.vuejs.org/zh-cn/
简单来说: 对应用中组件的状态进行集中式的管理(读/写)
状态自管理应用
state: 驱动应用的数据源
view: 以声明方式将state映射到视图
actions: 响应在view上的用户输入导致的状态变化(包含n个更新状态的方法)
多组件共享状态的问题
多个视图依赖于同一状态
来自不同视图的行为需要变更同一状态
以前的解决办法
- 将数据以及操作数据的行为都定义在父组件
- 将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)
vuex就是用来解决这个问题的
vuex的核心概念
state
vuex管理的状态对象
它应该是唯一的
1 | const state = { |
mutations
包含多个直接更新state的方法(回调函数)的对象
谁来触发: action中的commit(‘mutation名称’)
只能包含同步的代码, 不能写异步代码
1 | const mutations = { |
actions
包含多个事件回调函数的对象
通过执行: commit()来触发mutation的调用, 间接更新state
谁来触发: 组件中: $store.dispatch(‘action名称’) // ‘zzz’
可以包含异步代码(定时器, ajax)
1 | const actions = { |
getters
包含多个计算属性(get)的对象
谁来读取: 组件中: $store.getters.xxx
1 | const getters = { |
modules
包含多个module
一个module是一个store的配置对象
与一个组件(包含有共享数据)对应
向外暴露store对象
1 | export default new Vuex.Store({ |
组件中:
1 | import {mapGetters, mapActions} from 'vuex' |
@click=”zzz(data)”
映射store
1 | import store from './store' |
store对象
- 所有用vuex管理的组件中都多了一个属性$store, 它就是一个store对象
- 属性:
state: 注册的state对象
getters: 注册的getters对象- 方法:
dispatch(actionName, data): 分发action
将vuex引到项目中
- 下载: npm install vuex –save
- 使用vuex
1 | // store.js |
1 | // main.js |
vue-devtool
点击devtool 的第二个按钮可以检测到 vuex