Vuex-页面在提交状态更改后未更新

Posted 2023-02-23

【中文标题】Vuex-页面在提交状态更改后未更新

【英文标题】：Vuex- Page is not updating after commit changes made to state

【发布时间】：2021-02-05 22:33:27

【问题描述】：

我正在尝试制作一个包含 2 个 Vue 页面 add.vue 和 read.vue 的简单项目。如果我们在 add.vue 中添加一条消息（使用提交来改变状态），结果应该显示在 read.vue 中，使用 Vuex 存储。 （我正在使用 Nuxt）

存储/index.js 文件=>

export const state = () => (
  messages:[]
) 
export const mutations=
   addMessage:(state, comment)=> 
    state.messages.push(comment)
  

添加.vue 文件

<template>
  <div class="addContainer">
   <b-form @submit.prevent="handleSubmit">

      <b-form-group id="input-group-2" label="Comment:" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="comment"
          required
          placeholder="Enter Your Comment"
        ></b-form-input>
      </b-form-group>
        <b-button type="submit" variant="primary">Submit</b-button>
    </b-form>
  </div>
</template>

<script>
import Header from '~/components/Header'
import mapActions from 'vuex'
import mapState from 'vuex'
export default 
data() 
            return 
         comment:''
            
      ,
        computed:
            ...mapState([
              'messages'     
            ])
        ,
        methods:
        handleSubmit()
         this.$store.commit('addMessage', this.comment)
                console.log('Messages is '+this.messages )
          this.comment = ''
        
      ,
      components:
            Header
      
    
    </script>

---

read.vue

<template>
  <div>
    <p>Read Messages</p>
    <ul>
    <li v-for="(msg, index) in messages" :key="index">
    <b> msg</b>
    <br>
     messages
 

 </li>
</ul>

  </div>
</template>

<script>
import mapState from 'vuex'
  export default 
    data() 
      return 
    ,
    computed:
  ...mapState(
          messages:state=>state.messages 
    )
    
  
</script>

在 Vue 组件中，我可以在添加消息后看到消息数组内部的状态变化，但相同的变化不会反映在读取页面中。

【参考方案1】：

将 getter 添加到您的商店：

export const getters= 
   getMessages: state => state.messages

然后在组件中使用 getter，而不是直接访问状态：

// read.vue
<script>
import mapGetters from 'vuex'

  export default 
    data() 
      return 
    ,
    computed:
      ...mapGetters(
          messages: 'getMessages',
      )
    
  
</script>

【讨论】：

我按照您的建议进行了更改，但仍然无法正常工作。添加 getter 到 store 后，我是否必须在 add.vue 中进行任何更改。