[Предупреждение Vue]: к свойству myString был осуществлен доступ во время рендеринга, но он не определен в экземпляре

Я использую vuejs версию 3. Я пытаюсь сохранить имя пользователя для входа в свой Login.vue.

В качестве первого шага я пытаюсь сохранить содержимое поля ввода с именем myString.

К сожалению, я получаю сообщение об ошибке: [Vue warn]: Свойство 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>

// main.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>

vue.js vuejs3 vuex4
person Julian    schedule 14.04.2021    source источник

Ответы (1)


arrow_upward
1
arrow_downward

{{ myString }} не определен.

Вы можете получить форму Vuex с вычисленным свойством

computed: {
    mySting() {
        return this.$store.state.string
    }
}
person tauzN    schedule 14.04.2021
comment
Спасибо @tauzN, теперь я добавил myString: "", к данным в Login.vue. У меня не было опыта работы с computed. Где именно я использую это в своей конструкции? Я еще не до конца понимаю, как документация взаимодействует с моим кодом. v3.vuejs.org/guide/ - person Julian; 14.04.2021
comment
@Julian Если вы используете api композиции, проверьте это сделайте это вот так: myString: computed(() => store.state.string) - person tauzN; 14.04.2021
comment
Спасибо @tauzN, работает! я добавляю import { computed } from 'vue'; import * as vuex from 'vuex' в Login.vue и в части настройки: setup () {const store = vuex.useStore () return {myString: computed (() = ›store.state.string)}}, - person Julian; 14.04.2021