前端学习-vuex篇

Promise 笔记  (承诺)

all          所有
race       比赛

resolved 解决
rejected 拒绝

vue笔记  -  vuex篇

scoped 作用域

state      共享数据源
    Mutation  用于变更Store中的数据
    action     用于处理异步任务
    getter     用于对Store中的数据进行加工处理形成新的数据

state:共享数据源

获取公共元素
方法1： this.$store.state.xxx

    computed: {
        count() {
          return this.$store.state.count
        }
      },
方法2：
    import {maState} from 'vuex'
    computed:{
      ...mapState(['count'])
    }
    

Mutation 用于变更Store中的数据

好处：可以集中监控所有数据的变化

方法1：this.$store.commit()

1. 基础定义
//定义Mutation
const store = new Vuex.Store({
    state: {
        count:1
    },
    mutations:{
        adds(state){
           //变更状态
           state.count++
        }
    }
})

//触发mutation
methods:{
    butOne() {
        //触发mutation的第一种方式
        this.$store.commit('adds')
    }
}

2. 传参引用
1. //触发mutation的第一种方式
//定义Mutation
const store = new Vuex.Store({
    state: {
        count:1
    },
    mutations:{
        adds(state,step){
           //变更状态
           state.count+=step
        }
    }
})

//触发mutation
methods:{
    butOne() {
        //触发mutation的第一种方式
        this.$store.commit('adds',2)
    }
}

方法2： 触发mutations的第二种方式（this.$store.commit()是触发mutations的第一种方式）

import {mapMutations} from 'vuex'
//触发mutation
methods:{
    ...mapMutations{['add','adds']},
    btnOne(){
        this.adds();
    },
    btnTwo(){
        this.adds(3);
    
    
}

action     用于处理异步任务

1.触发action的第一种方式 this.$store.dispatch()

//延迟一秒+1
const store = new Vuex.Store({
    state: {
        count:1
    },
    mutations:{
        adds(state){
           state.count++
        }
    },
    actions: {
        addAsync(context){
            setTimeount(()=>{
                context.commit('add')
            },1000)
        }
    }
})

//出发Action
methods:{
    butOne() {
        //触发action的第一种方式
        this.$store.dispatch('addAsync')
    }
}

//延迟一秒+1 携带参数
const store = new Vuex.Store({
    state: {
        count:1
    },
    mutations:{
        adds(state){
           state.count++
        }
    },
    actions: {
        addAsync(context,setp){
            setTimeount(()=>{
                context.commit('add',setp)
            },1000)
        }
    }
})

// 触发 Action
methods:{
    butOne() {
        //触发action的第一种方式
        this.$store.dispatch('addAsync',3)
    }
}

方法2： 触发 Action 的第二种方式（this.$store.dispatch()触发action的第一种方式）

import {mapActions} from 'vuex'
//触发 mapActions
const store = new Vuex.Store({
    state: {
        count:1
    },
    mutations:{
        adds(state){
           state.count++
        }
    },
    actions: {
        addAsync(context,setp){
            setTimeount(()=>{
                context.commit('add',setp)
            },1000)
        }
    }
})

import { mapActions } from 'vuex'
// 触发 Action
<button @click="addAsyncs(3)"></button>

methods:{
    ...mapActions[{'addAsync' , 'addAsyncs'}]
    butOne() {
        this.addAsync('addAsync')
    },
    butTwo() {
        this.addAsync('addAsyncs',3)
    }
}

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

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

const store = new Vuex.store({
    state:{
        count:0
    },
    getters:{
        showNum:state=>{
            return ''当前数量是'+state.count
        }
    }
})

使用getter的第一种方式

this.$store.getters.名称

使用getter的第二种方式(插值表达式)

import { mapGetters } from ‘vuex’

computed: {
…mapGetters([‘showNum’] )
}