[Vue 警告]：在渲染期间访问了属性“myString”，但未在实例上定义

Question

我使用 vuejs 的第 3 版。我正在尝试将登录用户名保存在我的 Login.vue 中。

作为第一步，我尝试使用名称“myString”保存输入字段的内容。

不幸的是，我收到错误消息：“[Vue 警告]：在渲染期间访问了属性“myString”，但未在实例上定义。”。

我做错了什么？

// Login.vue（重点部分）

<template>
  {{ myString }}

  <input v-model="string" type="text" name="myString">
  <p>
    <button @click="setString">Set String</button>
    <br>
    <br>
    <button @click="deleteString">Delete String</button>
  </p>
</template>

<script>
import router from "@/router";

export default {
  name: "Login",
  components: {
    Field,
    Form,
    ErrorMessage,
  },
  data() {
    return {
      string: "",
    };
  },
  watch: {},
  methods: {
    setString() {
      this.$store.commit("myString", this.string);
    },
    deleteString() {
      this.$store.commit("myString");
    },
  },
};
</script>

// ma​​in.js

"use strict";
//exports.__esModule = true;

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
// import { createRouter, createWebHashHistory } from "vue-router";
import { createStore } from "vuex";

import createPersistedState from 'vuex-persistedstate';
import Cookies from 'js-cookie';

import SecureLS from "secure-ls";
const ls = new SecureLS({ isCompression: false });

const store = createStore({
  state() {
    return {
      count: 0,
      string: ""
    }
  },
  /*plugins: [createPersistedState({
    storage: {
      getItem: key => Cookies.get(key),
      setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
      removeItem: key => Cookies.remove(key)
    }
  })],*/
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => ls.get(key),
        setItem: (key, value) => ls.set(key, value),
        removeItem: key => ls.remove(key)
      }
    })
  ],
  mutations: {
    increment(state){
      state.count++;
    },
    decrement: state => state.count--,
    myString: (state, value) => value ? (state.string = value) : (state.string = "")
  },
})

const app = createApp(App)
.use(store)
.use(router)
.mount("#app")

// App.vue

<template>
  <navigation />
</template>

<script>
import Navigation from "./components/Navigation";

export default {
  name: "App",
  components: {
    Navigation,
  },
};
</script>

Answer 1

{{ myString }} 未定义。

你可以得到带有计算属性的表单 Vuex

computed: {
    mySting() {
        return this.$store.state.string
    }
}