Vuex 入门

目录：

第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使用