Vue，错误 [vuex] 不会在突变处理程序之外改变 vuex 存储状态

Question

这是原始代码。很简单，签到表。我们有电子邮件字段，密码。它接受这个参数并在单击提交按钮时检查用户并将他的 user.uid 写入 Vuex。但是我收到了上面标题中列出的错误。我做了研究，看起来这是 Vuex 中的一个常见问题，因为这些字段有时会“即时”更新 Vuex 商店，这在我的情况下是错误的，因为它只会在您按下提交按钮时更新 Vuex 商店。无论如何决定纠正看起来像 this 并且仍然没有运气

原代码

<template>
      <div class="form__inner">
          <div class="overlay" @click="$store.commit('logReg/logIn')"></div>
          <v-container
            fill-height
            fluid>
            <v-row
              align="center"
              justify="center">
              <v-col cols="2">
                <v-card>
                  <v-card-title>
                    Log in
                  </v-card-title>
                  <v-card-text>
                    <v-text-field placeholder="Email"
                                  v-model="logIn"/>
                    <v-text-field placeholder="Password"
                                  v-model="password"/>
                  </v-card-text>
                  <v-card-actions>
                    <v-btn color="success"
                           class="mx-auto"
                           @click="signIn">Log me in</v-btn>
                  </v-card-actions>
                </v-card>
              </v-col>
            </v-row>
          </v-container>
      </div>
    
    </template>
    
    <script>
      export default {
        data(){
          return {
            logIn: '',
            password: ''
          }
        },
        methods:  {
          async signIn(){
            let res = await this.$fireAuth.signInWithEmailAndPassword(this.logIn, this.password);
            this.$store.commit('userState', res);
          }
        }
      }
    </script>

我的vuex

export const state = () => ({
  user: null
})

export const mutations = {
  userState(state, authUser){
    state.user = authUser;
  }
}

我尝试修复仍然没有运气的问题，给出同样的错误

<template>
  <div class="form__inner">
      <div class="overlay" @click="$store.commit('logReg/logIn')"></div>
      <v-container
        fill-height
        fluid>
        <v-row
          align="center"
          justify="center">
          <v-col cols="2">
            <v-card>
              <v-card-title>
                Log in
              </v-card-title>
              <v-card-text>
                <v-text-field placeholder="Email"
                              v-model="logIn"/>
                <v-text-field placeholder="Password"
                              v-model="password"/>
              </v-card-text>
              <v-card-actions>
                <v-btn color="success"
                       class="mx-auto"
                       @click="signIn">Log me in</v-btn>
              </v-card-actions>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
  </div>

</template>

<script>
  export default {
    data(){
      return {
        logIn: '',
        password: ''
      }
    },
    computed: {
      logg: {
        get(){
          return this.logIn;
        },
        set(val){
          this.logIn = val;
        }
      },
      pass: {
        get(){
          return this.password;
        },
        set(val){
          this.password = val;
        }
      }
    },
    methods:  {
      async signIn(){
        let res = await this.$fireAuth.signInWithEmailAndPassword(this.logg, this.pass);
        this.$store.commit('userState', res);
      }
    }
  }
</script>

Answer 1

你必须像这样使用突变：

<script>
  import {mapMutations} from 'vuex';
  export default {
    data(){
      return {
        logIn: '',
        password: ''
      }
    },
    methods:  {
      ...mapMutations({
           userState: 'userState'
      }),
      async signIn(){
        let res = await this.$fireAuth.signInWithEmailAndPassword(this.logIn,this.password);
        this.userState(res);
      }
    }
  }
</script>