环境准备

确保已安装 Node.js（建议版本 14+）和 Vue CLI（全局安装命令：npm install -g @vue/cli）。创建一个新的 Vue 项目或使用现有项目。

项目结构初始化

在项目根目录下执行 vue add vuex 安装 Vuex 状态管理库。修改 store/index.js 文件，初始化任务列表和优先级相关状态：

// store/index.js
export default new Vuex.Store({
  state: {
    tasks: [],
    priorityOptions: ['低', '中', '高']
  },
  mutations: {
    ADD_TASK(state, task) {
      state.tasks.push(task)
    }
  }
})

优先级组件开发

创建 components/TaskPriority.vue 组件实现优先级选择功能：

<template>
  <select v-model="localPriority" @change="updatePriority">
    <option v-for="(option, index) in priorityOptions" 
            :key="index" 
            :value="option">
      {{ option }}
    </option>
  </select>
</template>

<script>
export default {
  props: ['priority'],
  data() {
    return {
      localPriority: this.priority,
      priorityOptions: this.$store.state.priorityOptions
    }
  },
  methods: {
    updatePriority() {
      this.$emit('priority-change', this.localPriority)
    }
  }
}
</script>

任务表单改造

修改现有任务添加表单，集成优先级选择功能：

<template>
  <form @submit.prevent="addTask">
    <input v-model="newTask" placeholder="任务内容">
    <TaskPriority 
      :priority="defaultPriority" 
      @priority-change="setPriority" />
    <button type="submit">添加</button>
  </form>
</template>

<script>
import TaskPriority from './TaskPriority.vue'

export default {
  components: { TaskPriority },
  data() {
    return {
      newTask: '',
      currentPriority: '中'
    }
  },
  methods: {
    addTask() {
      this.$store.commit('ADD_TASK', {
        id: Date.now(),
        text: this.newTask,
        priority: this.currentPriority
      })
      this.newTask = ''
    },
    setPriority(priority) {
      this.currentPriority = priority
    }
  }
}
</script>

任务列表展示增强

在任务列表组件中显示优先级标签并添加样式：

<template>
  <ul>
    <li v-for="task in tasks" 
        :key="task.id"
        :class="`priority-${task.priority}`">
      {{ task.text }} ({{ task.priority }})
    </li>
  </ul>
</template>

<style scoped>
.priority-高 { color: #ff4444; font-weight: bold; }
.priority-中 { color: #ffbb33; }
.priority-低 { color: #00C851; }
</style>

状态持久化

安装 vuex-persistedstate 插件实现状态持久化：

npm install vuex-persistedstate

修改 store 配置：

import createPersistedState from 'vuex-persistedstate'

export default new Vuex.Store({
  plugins: [createPersistedState()],
  // ...原有配置
})

功能验证

运行项目并测试以下场景：

1. 添加不同优先级的任务
2. 刷新页面验证状态持久化
3. 检查优先级样式是否正确应用

扩展建议

1. 添加优先级筛选功能
2. 实现拖拽调整优先级
3. 集成任务到期时间与优先级联动逻辑