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

Posted 2023-03-16

【中文标题】Vue，错误 [vuex] 不会在突变处理程序之外改变 vuex 存储状态

【英文标题】：Vue, error [vuex] do not mutate vuex store state outside mutation handlers

【发布时间】：2020-10-31 19:39:23

【问题描述】：

这是原始代码。很简单，签到表。我们有电子邮件字段，密码。它接受这个参数并在单击提交按钮时检查用户并将他的 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>

【问题讨论】：

尝试在codeandbox中重现您的问题，这样就可以清楚地找到实际问题

【参考方案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>