Vue3中的Vuex

store.js

//vuex
import { createStore } from 'vuex'
​
export default createStore({
  state: {
    num:1
  },
  mutations: {
    /**
     * @description: 修改num成新的num
     * @param {*} state 上方的state对象
     * @param {Number} newNum 新的num数值
     * @return {*} none
     */    
    setNum(state,newNum) {
      state.num = newNum
    }
  },
  actions: {
    // 异步递增num
    addAsync(store){
      setTimeout(()=>{
        console.log(store.state.num+=10);
      },1000)
    }
  },
  modules: {
  }
})
 

应用

<script setup>
import {useStore} from 'vuex'
import {onMounted} from 'vue'
// vuex实例
const store =new useStore();
onMounted(()=>{
  // 调用state中的title，并且加1
  store.state.num+=1
  store.state.num+=1
  console.log(store.state.num);//3
  // 调用mucation里的setNum方法，第二个参数为setNum方法里的第二个参数
  store.commit('setNum',10);
  console.log(store.state.num);//已经修改成10了
  // 调用action里的addAsync方法
  store.dispatch('addAsync')//输出结果：20
})
</script>