运用vue实现计时器操作1.使用action实现异步操作，点击计数，计数延迟一秒加一2.点击更改计数起始为学号后两位，使用store.replacestate()更改计数起始数为学号3.在页面最上方显示学号姓名

首先，在 Vuex 中定义 state、mutations 和 actions：

// store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    name: '',
    number: ''
  },
  mutations: {
    INCREMENT_COUNT(state) {
      state.count += 1
    },
    SET_NAME(state, name) {
      state.name = name
    },
    SET_NUMBER(state, number) {
      state.number = number
    }
  },
  actions: {
    incrementCountAsync({ commit }) {
      return new Promise(resolve => {
        setTimeout(() => {
          commit('INCREMENT_COUNT')
          resolve()
        }, 1000)
      })
    },
    setNumber({ commit }, number) {
      commit('SET_NUMBER', number)
      const name = `学号${number.slice(-2)}`
      commit('SET_NAME', name)
      localStorage.setItem('number', number)
      localStorage.setItem('name', name)
    },
    init({ commit }) {
      const number = localStorage.getItem('number') || ''
      const name = localStorage.getItem('name') || ''
      commit('SET_NUMBER', number)
      commit('SET_NAME', name)
    }
  }
})

export default store

其中，`state` 存储计数器的值、姓名和学号；`mutations` 定义同步操作，包括增加计数器的值、设置姓名和学号；`actions` 定义异步操作，包括延时增加计数器的值和设置学号和姓名。在 `setNumber()` 方法中，我们使用了 `localStorage` 来保存学号和姓名，以便在页面刷新后能够保持数据。

然后，在组件中使用计时器：

<!-- App.vue -->

<template>
  <div>
    <div>{{ name }}</div>
    <div>{{ count }}</div>
    <button @click="incrementCount">计数</button>
    <button @click="setNumber(number)">更改计数起始为学号后两位</button>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['count', 'name', 'number'])
  },
  methods: {
    ...mapActions(['incrementCountAsync', 'setNumber']),
    incrementCount() {
      this.incrementCountAsync()
    }
  },
  created() {
    this.init()
  }
}
</script>

在这个组件中，我们使用了 `mapState` 和 `mapActions` 函数来简化代码。`computed` 中的 `name`、`count` 和 `number` 分别对应 Vuex 中的 `state.name`、`state.count` 和 `state.number`。`methods` 中的 `incrementCount()` 方法调用了异步操作 `incrementCountAsync()`。`created` 钩子中调用了初始化操作 `init()`，以便在页面刷新后能够保持数据。

最后，我们需要在入口文件中导入 store 并将其挂载到 Vue 实例上：

// main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

现在，我们已经完成了计时器的开发。当用户点击计数按钮时，计数器的值会在延迟一秒后加一；当用户点击更改计数起始为学号后两位按钮时，计数器的起始值会被更改为学号后两位，并且在页面最上方显示学号姓名。