<script>
|
import {useCounterStore} from '@/stores/counter';
|
export default {
|
data(){
|
return{
|
|
}
|
},
|
setup(){
|
const store = useCounterStore()
|
const unsubscribe = store.$onAction(
|
({
|
name, // action 的名字
|
store, // store 实例
|
args, // 调用这个 action 的参数
|
after, // 在这个 action 执行完毕之后，执行这个函数
|
onError, // 在这个 action 抛出异常的时候，执行这个函数
|
}) => {
|
// 记录开始的时间变量
|
const startTime = Date.now()
|
// 这将在 `store` 上的操作执行之前触发
|
console.log(`Start "${name}" with params [${args.join(', ')}].`)
|
|
// 如果 action 成功并且完全运行后，after 将触发。
|
// 它将等待任何返回的 promise
|
after((result) => {
|
console.log(
|
`Finished "${name}" after ${
|
Date.now() - startTime
|
}ms.\nResult: ${result}.`
|
)
|
})
|
|
// 如果 action 抛出或返回 Promise.reject ，onError 将触发
|
onError((error) => {
|
console.warn(
|
`Failed "${name}" after ${Date.now() - startTime}ms.\nError: ${error}.`
|
)
|
})
|
}
|
)
|
return{
|
store,unsubscribe
|
}
|
},
|
computed:{
|
a(){
|
return this.store.doubleCount*2
|
},
|
|
},
|
mounted(){
|
|
},
|
methods:{
|
doThing(){
|
this.store.increment(5)
|
this.store.doubleCount
|
}
|
}
|
}
|
</script>
|
|
<template>
|
<div>
|
<el-button type="primary" @click="doThing">点击{{ store.doubleCount }}</el-button>
|
</div>
|
<div>{{ a }}</div>
|
<div>{{ store.secret }}</div>
|
<div>{{ store.vue }}</div>
|
<div>{{ store.天 }}</div>
|
|
</template>
|
<style scoped>
|
|
</style>
|
