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>