其他分享
首页 > 其他分享> > vue3语法糖使用vuex

vue3语法糖使用vuex

作者:互联网

store/index.vue

import { createStore } from 'vuex'

export default createStore({
  state: {
    num:123
  },
  mutations: {
    ADDNUM (state) {
      state.num++
    },
    GETNUM (state,num) {
      state.num = state.num * num
    }
  },
  actions: {
    ChengNum: ({commit},num) => {
      setTimeout(() => {
        commit("GETNUM",num)
      },1000)
    }
  },
  modules: {
  }
})

获取执行

<template>
    <div>
       {{state.num}}
       <button @click="add">加法</button>
       <button @click="ride">乘法</button>
    </div>
</template>

<script setup>
    import {useStore} from 'vuex'
    const {state,commit,dispatch}  = useStore()
    const add = () => {
        commit('ADDNUM')
    }
    const ride = () => {
        dispatch('ChengNum',3)
    }
    
    
</script>

<style>

</style>

标签:const,dispatch,语法,state,num,vue3,commit,vuex
来源: https://blog.csdn.net/weixin_44952708/article/details/123233425