Vuex 商店自动更新

Posted 2023-02-22

【中文标题】Vuex 商店自动更新

【英文标题】：Vuex Store Automatically Updated

【发布时间】：2017-11-09 19:52:38

【问题描述】：

我的Vuex 商店获得automatically updated，而无需立即调用router change 上的任何getters 或committing 任何mutation。

在保存表单之前我不会对 VUEX 进行更改，因此这意味着数据以两种方式绑定到 VUEX。我的印象是这是不可能的。在这种情况下，这是不希望的，因为如果用户更改了一些数据，然后在没有实际单击“保存”的情况下导航离开，那么 VUEX 的数据仍然会更改

【问题讨论】：

如果您的任何组件的引用和直接操作 vuex 状态对象都是可能的。但在这种情况下你应该会收到警告......

请贴一些代码...

我会在您的组件中创建一个单独的 data 对象，并且仅在“提交”时将更改提交到商店。

computed getter 绑定到 vuex 状态对象，因此您需要将另一个变量与它分开来保存该值，并且只有在将其提交到存储时它才会更新状态，不要使用一样的。

我同意@Afik​​Deri。您可以使用严格模式，您应该会收到警告：vuex.vuejs.org/en/strict.html

【参考方案1】：

<template>
  <h1>userName</h1>
  <input type="text" v-model="name.selected" :placeholder="user.username" @keyup.enter="Confirm"/>
</template>

<script>
  import  mapGetters  from 'vuex'
  import  updateUserData  from 'mesh-shared/api/'
  export default 
    name: 'PreferenceProfile',
    data() 
      return 
        name: 
          isActive: false,
          selected: '',
          onChange: false
        
      
    ,
    computed: 
      ...mapGetters([
        'user',
        'preference'
      ]),
      userName() 
        if (this.name.selected !== '') 
          return this.name.selected
         else 
          return this.user.username
        
      
    ,
    methods: 
      toggleNameRider() 
        this.name.isActive = true
      ,
      async Confirm() 
        const params = 
          userId: this.user.userId,
          accessToken: this.user.auth.accessToken,
          avatar: (this.avatar.uploadData.url) ? this.avatar.uploadData.url : this.user.avatar,
          username: this.userName
        
        const data = await updateUserData(params)
        console.log(data)
        const user = Object.assign(this.user, 
          completed: true
        , data.data.user)
        this.cancel()
      ,
      cancel() 
        this.avatar.newUrl = ''
        this.name.selected = ''
        this.name.isActive = false
      
    
  
</script>

我建议你做这样的事情。正如我从您的问题中了解到的那样，您将 v-model 设置为吸气剂。 而不是这样做检查下面的例子。希望能帮到你。