问题描述
我使用 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>
// 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),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>
解决方法
{{ myString }}
未定义。
您可以使用计算属性获取表单 Vuex
computed: {
mySting() {
return this.$store.state.string
}
}