Question

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

store / index.js file =>

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

add.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

将吸气剂添加到您的商店中：

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

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

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

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

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

read.vue

1 个答案: