| | |
| | | <script> |
| | | // import DustRadarChart from '../../sfc/DustRadarChart.vue'; |
| | | // import TimeSelectWithShortCuts from '../../sfc/TimeSelectWithShortCuts.vue' |
| | | import dayjs from 'dayjs'; |
| | | export default { |
| | | components :{ |
| | | // DustRadarChart, |
| | | // TimeSelectWithShortCuts |
| | | }, |
| | | data() { |
| | | import {useCounterStore} from '@/stores/counter'; |
| | | export default { |
| | | data(){ |
| | | return{ |
| | | |
| | | } |
| | | }, |
| | | mounted() { |
| | | }, |
| | | 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 |
| | | }, |
| | | methods: { |
| | | |
| | | } |
| | | }, |
| | | 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 scoped> |
| | | |
| | | </style> |