如何在vue中保存用户输入数据

Question

我正在使用 Vue 创建我的第一个网站，因此我正在创建一个用于保存食谱的网站主页有点像（待办事项列表），所以我在保存用户输入的数据时遇到了麻烦。如何从 getter 取回保存的数据？附言。我知道这很简单，但我是 Vue 新手 这是我的代码（newrecp 页面）：

<template>
  <div class="container">
    <v-text-field
      class="mx-1 my-1"
      label=" food name"
        color="black"
        outlined 
        v-model="data . title"
    ></v-text-field> 
   
    <v-timeline :dense=" $vuetify . breakpoint . s m And   Down">
      <v-timeline-item
        color="purple lighten-2"
        fill-dot
        right
      >
        <v-card>
          <v-card-title class="purple lighten-2">
            <h2 class="display-1 white--text font-weight-light">Step 1</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col cols="12" md="10">
                <v-text area                   
                  auto-grow 
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data.one"
                ></v-text area>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>

      <v-timeline-item
        color="amber lighten-1"
        fill-dot
        left
        small
      >
        <v-card>
          <v-card-title class="amber lighten-1 justify-end">
            <h2 class="display-1 mr-4 white--text font-weight-light">Step 2</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col cols="12" md="8">
                <v-text area
                  auto-grow
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data. two"
                ></v-text area> 
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>

      <v-timeline-item
        color="cyan lighten-1"
        fill-dot
        right
      >
        <v-card>
          <v-card-title class="cyan lighten-1">
            <h2 class="display-1 white--text font-weight-light">Step 3</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col >
                <v-text area
                  auto-grow
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data .three"
                ></v-text area>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>

      <v-timeline-item
        color="red lighten-1"
        fill-dot
        left
        small
      >
        <v-card>
          <v-card-title class="red lighten-1 justify-end">
            <h2 class="display-1 mr-4 white--text font-weight-light">Step 4</h2>
          </v-card-title>
          <v-container>
            <v-row>
              <v-col cols="12" md="10">
                <v-text area
                  auto-grow
                  rows="4"
                  row-height="20"
                  shaped
                  v-model="data .four"
                ></v-text area>
              </v-col>
            </v-row>
          </v-container>
        </v-card>
      </v-timeline-item>
    </v-timeline>
    <v-layout row wrap>
      <v-flex mx-3 >
        <v-b t n block color="secondary" dark @click="addnew">Save</v-b t n>

      </v-flex>
    </v-layout>
  </div>
</template> 

<script>
export default {
  data (){
    return{
      data: {
        title:'',
        one: '',
        two: '',
        three: '',
        four: '',
      }
    },
   
       methods: {
   addnew(){
 let savedrecp = this.data
 this.$store.commit('newrecp', savedrecp)
 this.$router.push({ path:'/' }) 
}},
          
}
</script> 

在我的店里：

state: {
   data : [],
},
mutations: {
  newrecp(state, data) {
    // mutate state
    state. data .push(data)
  }
},
getters: {
  data(s){
    return s .data
  },  
}

我保存的食谱页面的脚本：

<script>
export default {
  data (){
    return{         
      data: {
        title: '',
        one: '',
        two: '',
        three: '',
        four: ''
      },
    }
  },
  computed: {
    item(){
      return this. $store.getters.data
    }
  },

  mounted() {
    console.log(this. data);
  },
}
</script>

主页：

<template>
  <div class="home">
    <v-container grid-list-xs>
      <v-btn bottom fixed to="/new" > Click to add new Recipes
        <v-icon>fas fa-home</v-icon>
      </v-btn>

      <v-layout row wrap>
         <v-flex xs12 x13 lg12 v-for="(item, index) in data" :key="index">
           <v-card 
 
           >

           <v-list-item three-line>
             <v-list-item-content>
                <div class="overline mb-4">Recipe </div>
                <h1>{{item.title}}</h1>
                <v-list-item-title class="headline mb-1">pizza</v-list-item-title>
                <v-list-item-subtitle >Greyhound divisely hello coldly fonwderfully</v-list-item-subtitle>
              </v-list-item-content>
            </v-list-item>

            <v-card-actions>
              <v-btn  class="button3" text>remove</v-btn>
              <v-btn class="button1" text :to="'/savedrecp/'+item.title">open</v-btn>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </div>
</template>

<script>

Answer 1

一般我们在表单输入、文本区域和选择元素上使用双向绑定，以便保存输入数据，您可以阅读官方文档here。

关于您的代码，我没有看到任何问题，除非您现在还没有共享某些内容，您必须能够像这样使用您的数据：

savedRecipe() {
    console.log(this.data) // => you can check you'r data in console.
}

更新

您正在尝试从 vue 组件修改 vuex 状态，您不能这样做。您只能从 mutation 修改 vuex 存储。

在你的店里：

  mutations: {
     addRecipe(state, recipe) {
      // mutate state
      state.data.push(recipe)
    }

并提交突变：

savedrecp(){
 let savedrecp = this.data
 this.$store.commit('addRecipe', savedrecp)
 this.$router.push({ path:'/' }) 
}