【无标题】

tommoq

已于 2023-09-13 16:20:50 修改

阅读量173

点赞数

文章标签： javascript 前端 vue.js

于 2023-09-13 14:49:25 首次发布

本文链接：https://blog.csdn.net/weixin_47198950/article/details/132853828

版权

本文介绍了如何在Vue项目中使用Vuex进行状态管理和组件通信，通过actions进行异步操作，以及commit进行数据变更。展示了dispatch和commit的使用实例，包括状态更新和分阶段处理的过程。

摘要由CSDN通过智能技术生成

<template>
    <div class="flex">
       <h2>{{$store.state.sum1}}</h2>
       <h2>{{$store.state.sum2}}</h2>
       <h1>{{$store.getters.bigSum}}</h1>
       <button @click="add1">+</button>
       <button @click="add2">+</button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                num1: 1,
                num2: 2,
            }
        },
        methods: {
            add1() {
                // 方案1
                this.$store.dispatch('add1',this.num1)
            },
            add2() {
                // 方案2
                this.$store.commit('ADD2',this.num2)
            }
        },
    }
</script>

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// dispatch
// 服务员actions    动作、行为
// commit 
// 厨师mutations    改变、转变
// state

// 用于响应组件中的动作  
// 我们可以在 action 内部执行异步操作
const actions = {
  // 方案1
  add1(context,value){
    setTimeout(()=>{
      context.commit('ADD1',value)
    },3000)
    // if(context.state.sum1!==4){
    //   context.commit('ADD1',value)
    // }
  }
}
// 用于操作数据（state） 
const mutations = {
    // 方案1
    ADD1(state,value){
      console.log(state,value,'2')
      state.sum1 += value
    },
    // 方案2
    ADD2(state,value){
      state.sum2 += value
    },
}
// 用于存储数据
const state = {
   sum1:0,
   sum2:1,
}
// 用于将state中的数据进行加工
const getters = {
   bigSum(state){
      return state.sum1*10
   }
}
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

** mapState,mapGetters**

<template>
    <div class="flex">
       <!-- <h2>{{$store.state.sum1}}</h2> -->
       <!-- <h2>{{$store.state.name}}</h2> -->
       <!-- <h2>{{$store.state.title}}</h2> -->
       <!-- <h1>{{$store.getters.bigSum}}</h1> -->
       <h2>{{sum1}}</h2>
       <h2>{{name1}}</h2>
       <h2>{{title}}</h2>
       <h1>{{bigSum}}</h1>
       <button @click="add1">+</button>
    </div>
</template>
<script>    
    import { mapState,mapGetters } from 'vuex'
    export default {
        data() {
            return {
                num1: 1,
                sum1: null,
            }
        },
        computed: {
            // sum1() {
            //     return this.$store.state.sum1 
            // },
            // name(){
            //     return this.$store.state.name
            // },
            // title(){
            //     return this.$store.state.title
            // },
            // bigSum(){
            //     return this.$store.getters.bigSum
            // }

            // mapState 辅助函数仅仅是将 store 中的 state 映射到局部计算属性
            // ...mapState({sum1:'sum1',name1:'name1',title:'title'}),            
            ...mapState([
                'sum1',
                'name1',
                'title'
            ]),            
            // mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
            // ...mapGetters(['bigSum']),
            ...mapGetters({bigSum:'bigSum'}),
        },
        methods: {
            add1() {
                this.$store.dispatch('step1',this.num1)
            }
        },
    }
</script>

在action中使用dispatch和state

const actions = {
  step1(context,value){
    if(context.state.sum1<4){
      context.dispatch('step2',value)
    }else{
      context.dispatch('step3',value)
    }
  },
  step2(context,value){
    console.log('11')
    context.commit('ADD1',value)
  },
  step3(context,value){
    console.log('22')
    context.commit('ADD1',value)
  }
}