目录:
第1节 Vue成果展示及项目搭建
第2节 Vuex- 搭建vuex中央状态管理
第3节 Vuex- getters
第4节 Vuex- Mutations
第5节 Vuex- Actions
第6节 Vuex- Mapping Actions & Getters使用
========================================================
第1节 Vue成果展示及项目搭建
========================================================
1. what is vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
2. 单一使用vue.js的场景,若要从添加组件向详情组件传递数据,或者数据共用,过程较复杂。
3. 使用vuex.js的场景,通过 mutation,getter发送或获取数据。更加直向更加清晰的管理数据。
4. 搭建项目
step1: vue init webpack-simple vuex-playlist
step2: cnpm install
step3: npm run dev
5. npm 知识
npm info [packagename] version // 查看本地安装包版本
========================================================
第2节 Vuex- 搭建vuex中央状态管理
========================================================
1. 安装 vuex
cnpm install vuex --save-dev
2. 新建 store.js
step1: 引入Vue、Vuex
step2: Vue.use(Vuex)
step3:
export const store = new Vuex.Store({ state:{ products: [ // ... ] } })
3. main.js中引入 store.js
4. App.vue 引入 组件
5. 组件内部调用 store 中的数据
computed: { products() [ return this.$store.state.products; ] }
========================================================
第3节 Vuex- getters
========================================================
1. store.js 中添加 getters
2. 组件内引用 getters 。(this.$store.getters.saleProducts)
========================================================
第4节 Vuex- Mutations
========================================================
1.Mutations介绍
2.组件内操作降价
3. Mutations使用
========================================================
第5节 Vuex- Actions
========================================================
1. 简介
2.reduce可以进行异步操作,并传递参数
========================================================
第6节 Vuex- Mapping Actions & Getters使用
========================================================
1. Mapping Actions & Getters使用