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

Question

最近一直在努力学习Vuex，希望自己的数据和未完成的表单数据在路由之间导航时不会丢失。在 Vuex 的页面中有一个关于递增和递减值的简单管理示例，但我无法根据我的需要调整此示例。我有一个简单的组件，它从用户那里获取用户名和密码。因为我会在我的项目中到处使用这个方法，所以我想在复选框、select 元素和通常所有的表单元素中使用这个方法。假设用户输入用户名并留下密码，然后在不同的路由、组件之间导航并返回到第一个组件。我希望用户名输入字段填充用户之前输入的字段。我认为我需要双向数据绑定，因为我还对项目中的每个输入元素进行了一些验证，并且它们都与具有 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 中的状态发生变化，所以即使路由或组件发生变化，我也可以在 return 时使用该数据。我不确定我是否正确理解用法。我错过了什么吗？你能帮助我吗？提前致谢！

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
        }
      }
  }

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

Simple state management with Vuex & Vue-Router

vue.js

vuex

vue-router

v-model

已更新