使用 Vuex 和 Vue-Router 进行简单的状态管理

编程问答 2022-08-07

问题描述

我最近一直在尝试学习Vuex，以便在路由之间导航时不会丢失我的数据和未完成的表单数据。在 Vuex 的页面中有一个关于递增和递减值的简单管理示例，但我无法根据我的需要调整此示例。我有一个简单的组件，它从用户那里获取用户名和密码。由于我将在项目中的任何地方使用此方法，因此我想在复选框、选择元素和一般所有表单元素中使用此方法。假设用户输入用户名并留下密码，然后在不同的路线、组件之间导航，然后返回到第一个组件。我希望用户名输入字段填充用户之前输入的那个。我想我需要双向数据绑定，因为我还对项目中的每个输入元素进行了一些验证，并且它们都与具有 v-model 的唯一数据相关联。

我尝试创建 store.js 文件和其中的状态。当我将一个状态声明为 username 并将其设置为诸如“Jason”之类的静态内容时，我可以在我的组件中将它用作 this.$store.state.username 但这是我的问题；我如何设置

state : {
 username: 'Jason'
}

一些动态的东西，这样每次输入用户名输入字段时它都会改变。这是我输入的用户名；

<input v-model="userData.username" type="text" />

data() {
      return {
        userData: {
          username: "",},};
    },

当用户输入内容时，用户名会在数据中更新。我希望它在 Vuex 中的状态发生变化，因此即使路由或组件发生了变化，我也可以在返回时使用该数据。我不确定我是否正确理解了用法。我错过了什么吗？你能帮助我吗？提前致谢！

Store.js

state:{
    cloud_user:""
 },mutations:{
    set_userName(state,val){
      state.cloud_user = val
    }
 }

计算

computed: {
  set_username:{
    set(val){
      this.$store.commit("set_username",val)
    },get(){
      return this.$store.state.username
    }
  }
}

目前我遇到以下错误

[Vue warn]: Method "computed" has type "object" in the component definition. Did you reference the function correctly?

另外，也有这个错误；

[Vue warn]: Property or method "set_username" is not defined on the instance but referenced during render.

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

v-modelvue.js