vue.js-无法更改消息状态

Question

我的login.vue中显示以下消息

<p v-if="registered" class="greenbg white p-3 text-justify">
       {{message}}
 </p>

我具有以下数据属性

         data(){
            return{

                email: '',
                password: '',
                role: 'issuer',
                message: this.$store.state.message,
                registered: this.$store.state.registered
                
            }
        }

我用过

this.$store.dispatch('ilogin',{//some data for verification})

在商店index.js中，我有一个发送获取请求的动作。

  actions: {

  ilogin({commit},authData){

        axios.post('/login', {
        //some data
      })
      .then((res) => {

        //do something
      })
      .catch((error) => {

        commit('noauthUser',{
          message: error.response.data.message
        })
        
        
      })
  }
}

在变异部分，我具有以下变异

  mutations: {


         noauthUser(state, noauthData){

         state.message = noauthData.message,
         state.registered = true
  
     }

 
   }

尽管vue开发人员工具说值已更新，但我无法显示消息。

这种行为的任何特殊原因

Answer 1

由于存储中的数据可能会更改，因此需要将message和registered定义为计算属性。您还可以使用mapGetters：

computed: mapGetters(['message', 'registered'])

别忘了从Vuex导入mapGetters