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

Question

我最近一直在尝试学习 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.

Answer 1

其实你不需要使用data() 属性。但是你需要使用computed 并且你应该使用setter。

模板

<input v-model="set_userName" type="text" />

脚本

<script>
  export default {
    computed: {
      set_username:{
        set(val){

        },
        get(){
          
        }
      }
    }
  }
</script>

vuex.store

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

以及我们所做的。我们创建了计算属性，然后将值设置为 vuex 并从 vuex 获取新设置的数据。

关键点在于mutations 部分。您正在通过set(val) 设置当前值并将其作为set_userName(state, val) 中的val 提交给突变，然后将that val 赋予state。

更新

还添加了一种更合适的方式来改变状态。不是直接来自 setter，而是通过操作。

在mutations:{} 的正下方创建actions。

 state:{
    userName:""
 },
 mutations:{
    set_userName(state, val){
      state.userName = val
    }
 },
 actions:{
    PATCH_CURRENT_VALUE({commit}, payload){
      this.commit("set_userName", payload)
    }
 }

现在你应该更改computed:{}

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