3-3-1vuex 状态管理

1.目标
vue组件间通信方式回顾
vuex核心概念和基本使用回顾
购物车案例
模拟实现vuex

学会vux 	是什么
			怎么使用
			原理

2.组件内状态管理流程
vue 核心功能 数据驱动 和 组件化

state 	状态：  数据 data   需要绑定到视图
view 	视图：  模板
action	动作：  修改方法    修改数据要更新视图

3.通信方式–父组件给子组件传值
1.父组件给子组件传值
2.子组件给父组件船只
3.不相干组件传值

	父组件给子组件传值
		子组件通过props接收数据
		父组件给子组件通过相应属性传值

4.通信方式–子组件给父组件传值
示例展示

5.通信方式–不相干组件之间传值
6.通信方式-- 通过ref获取电子组件 项目小的情况
$root
$parent
$children
$refs 会导致数据管理的混乱

7.简易的状态管理方案
问题：
多个视图依赖同一状态
来自不同视图的行为需要变更同一状态

	多个组件的状态放在一个地方集中存储  store.js

8.vuex概念回顾
专门为vue.js设计的状态管理库
vuex采用集中式的方式存储需要共享的状态
作用是进行状态管理，解决复杂组件通信，数据共享
集成到devtools中，提高time-travel 时光旅行历史回滚功能

使用场景
	非必要的情况不要使用  组件不多 项目不大   
	大型的单页应用程序
		多个视图依赖于同一状态
		来自不同视图的行为需要变更同一状态

9.vuex核心概念
Store 仓库
state 响应式状态 保存在store中
getter 属性
mutations 状态更新
action 可以异步状态更新
Module 模块

10.Vuex基本结构
导入vuex
Vue.user（Vuex） 注册插件
Vuex.Store：
state：{}
mutations：{}
actions：{}
modules：{}

在app.vue中 像router一样注入store

11.State 单一状态树 存储所有的状态数据
响应式状态
mapState 函数 计算属性 简化操作
computed:
…mapState({ num: ‘count’, message: ‘msg’ })
定义声明 num message 变量

12.Getters 对state的数据进行处理 展示

reverseMsg (state) {
  return state.msg.split('').reverse().join('')
}
computed:
...mapGetters(['reverseMsg'])  计算属性

13.Mutations 状态的修改
increate (state, payload) {
state.count += payload
}
在method中
…mapMutations([‘increate’]),

界面中  通过$store.commit('increate', 2)   commit调用

调试中 可以时光旅行  历史回滚 查看当时state的状态和操作
不要进入异步操作

14.Action 异步操作
需要更改状态 还是需要调用Mutations
increateAsync (context, payload) {
setTimeout(() => {
context.commit(‘increate’, payload)
}, 2000)
}

	methods:
		...mapActions(['increateAsync']),
		
	界面中 通过$store.dispatch('increateAsync', 5)  dispatch调用

15.module 模块
…mapState(‘products’, [‘products’])
名字 属性

...mapMutations('products', ['setProducts'])
					名字		方法
					
					
namespaced: true,   命名空间开启

16.vuex严格模式
不能在mutation外 修改组件中state的状态 否则会爆出错误
不要在生产环境下使用严格模式
strict: process.env.NODE_ENV !== ‘production’,

17.案例 购物车
商品列表
购物车列表
弹出框组件

18.商品列表组件 vuex 统一配置
在 index.js中导入
展示商品列表
state
products 记录商品属性
getter
mutations
setProducts 修改商品数据
actions 请求接口商品数据
async getProducts ({ commit }) {
const { data } = await axios({
method: ‘GET’,
url: ‘http://127.0.0.1:3000/products’
})
commit(‘setProducts’, data)
}

添加购物车

19. 弹出框组件
    删除商品
    获得数量 价钱

19.购物车列表
全选







<el-checkbox
size=“mini”
:value=“scope.row.isChecked”
@change=“updateProductChecked({
prodId: scope.row.id,
checked: $event
})”
>

数字文本框加减功能
删除商品统计选择商品的数量和总价

20.store 类
init 手写 vuex
commit
dispatch