Vue.js [Vue warn]：属性“；myString“；在渲染期间被访问，但未在实例上定义

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

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

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

我做错了什么

//Login.vue（焦点部分）

//App.vue

<template>
  <navigation />
</template>

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

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

从“/components/Navigation”导入导航；
导出默认值{
名称：“应用程序”，
组成部分：{
航行
},
};

{{myString}}

未定义

您可以使用计算属性获取表单Vuex

计算：{
mySting（）{
返回此。$store.state.string
}
}

谢谢@tauzN，我现在在Login.vue中的数据中添加了

myString:，

。我对计算机没有任何经验。我在构造中具体在哪里使用这个？我还没有完全理解文档与代码的交互@Julian如果您使用的是composition api，请这样做：

myString:computed（（）=>store.state.string）

谢谢@tauzN，它可以工作！我从“vue”添加

import{computed}；从Login.vue中的“vuex”导入*作为vuex

，安装部分：setup（）{const store=vuex.useStore（）返回{myString:computed（（）=>store.state.string）}，

"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")

<template>
  <navigation />
</template>

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

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