vuex学习笔记

1.1 组件之间共享数据的方式

父向子传值：v-bind属性绑定

子向父传值：v-on事件绑定

兄弟组件之间共享数据：EventBus

• $on 接收数据的组件

• $emit 发送数据的那个组件

以上为小范围数据传值

1.2 vuex是啥

实现组件全局状态（数据）管理的一种机制，方便实现组件之间的数据共享

1.3 vuex的好处

1 能够在vuex中集中管理共享的数据，易于开发和后期维护

2 能够高效的实现组件之间的数据共享，提高开发效率

3 数据都是响应式

1.4 什么数据合适存储到vuex

只有组件之间共享的数据，才有必要存储到vuex中，对于组件中的私有数据，依旧存在自身的data中即可

2.1 安装vuex

1 安装依赖包
npm install vuex --save

2 导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)

3 创建store对象

const store = new Vuex.Store({
      // state中存放的就是全局共享的数据
      state:{count:0}
})

4 将store对象挂载到vue实例中

new Vue({
      el:"app",
      render:h=>h(app),
      router,
      store
})

3.1 核心概念概述

Vuex中的主要核心概念如下：

• State
• Mutation
• Action
• Getter

3.2 State

State提供唯一的公共数据源，所有的共享数据统一放在Store的State中进行存储

const store = new Vuex.Store({
      // state中存放的就是全局共享的数据
      state:{count:0}
})

• 组件访问State中数据的第一种方式

this.$store.state.全局数据名称

• 组件访问State中数据的第二种方式

// 1. 从vuex中按需导入mapState
import {mapState} from 'vuex'

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为computed的计算属性

computed:{
      ...mapState(['count'])
}

3.3 Mutation

Mutation 用于变更Store中数据

1、vue中只可以通过Mutation 变更Store数据，不允许直接操作Store中的数据
2、操作虽然繁琐一些，但是可以集中监控所有数据的变化

// store中定义Mutation
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        // 第一个形参永远是state
        add(state){
            state.count++
        }
    },
    actions: {},
    modules: {}
})


// 组件中调用Mutation 触发

methods:{
    addBtn(){
        // 不合法 别用这种写法
        // this.$store.state.count++
        // Mutation 变更数据
        this.$store.commit('add')
    }
}

• Mutation 携带参数

// store中定义Mutation
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        // 第一个形参永远是state,step是携带参数
        add(state，step){
            state.count+=step
        }
    },
    actions: {},
    modules: {}
})


// 组件中调用Mutation 触发

methods:{
    addBtn(){
        this.$store.commit('add',3)
    }
}

• 触发mutation函数的第二种方式（store中的index.js定义方法一致）

// 1.从vuex中按需导入mapMutation函数
import {mapMutations} from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数，映射为当前组件的methods方法

// 2.将指定的mutations函数，映射为当前组件的methods函数
methods:{
      ...mapMutations(['add','addN']) // 直接this.定义的函数名()   即可调用
}

3.4 Action

Action 用于处理异步任务

如果通过异步操作变更数据，必须通过Action,而不能使用Mutation,但是Action中还是要通过触发Mutation的方式间接变更数据

• this.$store.dispatch 专门用来触发action函数

   // 定义异步任务
    mutations: {
        // 第一个形参永远是state
        add(state) {
            state.count++
            // mutations 中不要写异步代码
            // setTimeout(() => {
            //     state.count++
            // }, 1000)
        }
    },
    actions: {
        addAsync(context) {
            setTimeout(() => {
                // action 中不能直接修改state中的数据
                // 通过context.commit仍是指向mutation间接修改
                context.commit('add')
            }, 1000)
        }
    },


    // 组件中用函数调用异步任务 第一种方法
    addBtn3(){
        this.$store.dispatch('addAsync')
    }

• 如何携带参数

   // 异步
   actions: {
        addAsync(context) {
            setTimeout(() => {
                context.commit('add')
            }, 1000)
        },
        addNAsync(context, step) {
            setTimeout(() => {
                context.commit('addN', 3)
            }, 1000)
        }
    },

    // 调用时带参数
    addBtn4(){
            this.$store.dispatch('addNAsync',3)
    },

• 触发actions的第二种方式
  1.导入mapActions函数
  import {mapActions} from 'vuex'、

2.将指定的actions函数，映射为当前组件的methods函数

methods:{
  ...mapActions(['addAsync','addNAsync']) 
}

3.5 Getter

Getter用于对Store中的数据进行加工处理形成新的数据

1、Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
2、Store 中数据发生变化，Getter 的数据也会跟着变化。

• 使用getters的第一种方式
  this.$store.getters.名称

• 第二种方式

import {mapGetters} from 'vuex'