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

Question

我正在尝试制作一个包含 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 组件中，我可以在添加消息后看到消息数组内部的状态变化，但相同的变化不会反映在读取页面中。

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