如何使用Vuex保存输入框录入的值？Vuex新手实践求助

一、完善Vuex Store配置 #

首先补充Store的mutations（修改State的唯一合法方式）和getters，同时新增存储卡片的数组：

// store/index.js
import { createStore } from 'vuex'

const store = createStore({
  state: {
    headPrivive: "", // 输入框临时内容
    cards: [] // 存储所有创建的卡片
  },
  mutations: {
    // 更新输入框的临时值
    UPDATE_HEAD_PRIVIVE(state, value) {
      state.headPrivive = value
    },
    // 添加新卡片到列表
    ADD_CARD(state) {
      if (state.headPrivive.trim()) {
        state.cards.push({
          id: Date.now(), // 用时间戳生成唯一ID
          title: state.headPrivive
        })
        state.headPrivive = "" // 清空输入框
      }
    }
  },
  getters: {
    headPrivive: state => state.headPrivive,
    allCards: state => state.cards
  }
})

export default store

二、组件中实现双向绑定与卡片创建逻辑 #

Vuex的State是只读的，不能直接通过v-model修改，需要用计算属性的get和set方法实现双向绑定，同时添加创建卡片的触发方法：

<template>
  <div class="container mt-4">
    <!-- 输入框 -->
    <input 
      id="nameTask" 
      type="text" 
      class="form-control" 
      placeholder="Input Label For New ToDo"
      aria-describedby="basic-addon1" 
      v-model="headPrivive"
    >
    <!-- 创建卡片按钮 -->
    <button @click="createCard" class="mt-2 btn btn-primary">创建卡片</button>

    <!-- 渲染卡片列表 -->
    <div class="mt-4 row">
      <div 
        v-for="card in allCards" 
        :key="card.id" 
        class="col-md-4 mb-3"
      >
        <div class="card">
          <div class="card-body">
            <h5 class="card-title">{{ card.title }}</h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    // 实现v-model双向绑定：get从Store取值，set提交Mutation修改State
    headPrivive: {
      get() {
        return this.$store.getters.headPrivive
      },
      set(value) {
        this.$store.commit('UPDATE_HEAD_PRIVIVE', value)
      }
    },
    // 获取所有卡片数据
    allCards() {
      return this.$store.getters.allCards
    }
  },
  methods: {
    // 触发添加卡片的Mutation
    createCard() {
      this.$store.commit('ADD_CARD')
    }
  }
}
</script>

三、关键逻辑说明 #

1. 双向绑定处理：计算属性headPrivive的get方法返回Store中的值，set方法通过commit调用UPDATE_HEAD_PRIVIVE Mutation修改State，符合Vuex的状态管理规范。
2. 卡片创建：点击按钮时调用createCard方法，提交ADD_CARD Mutation，将输入框的内容添加到cards数组中，并清空输入框。
3. 卡片渲染：通过v-for遍历allCards getter返回的卡片数组，动态渲染所有已创建的卡片。

内容的提问来源于stack exchange，提问作者Евгений Худак