Question

我正在这里学习课程

https://thinkster.io/tutorials/nuxt-js-project/adding-authentication

我正在为我的应用添加身份验证，并具有部分登录/注销按钮，这些按钮可部分用于Firebase身份验证。我可以正常登录，但是问题是，当我登录时，我的Vuex存储中的操作似乎没有运行，因此使用户保持登录状态，并且状态未更新以显示注销按钮。

default.vue

<template>
  <v-app>
    <v-navigation-drawer
      v-model="drawer"
      :mini-variant="miniVariant"
      :clipped="clipped"
      fixed
      app
    >
      <v-list>
        <v-list-item
          v-for="(item, i) in items"
          :key="i"
          :to="item.to"
          router
          exact
        >
          <v-list-item-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title v-text="item.title" />
          </v-list-item-content>

        </v-list-item>
        <button v-if="!mySession" @click="login">Login</button>
        <button v-else @click="logout">Logout</button>
      </v-list>
    </v-navigation-drawer>
    <!-- <v-toolbar fixed app :clipped-left="clipped">
      <v-toolbar-side-icon @click="drawer = !drawer"></v-toolbar-side-icon>
      <v-tool-bar-title v-text="title"></v-tool-bar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items>
        <v-btn @click="login">Login</v-btn>
        <v-btn @click="logout">Logout</v-btn>
      </v-toolbar-items>
    </v-toolbar> -->
    <v-app-bar
      :clipped-left="clipped"
      fixed
      app
    >
      <v-app-bar-nav-icon @click.stop="drawer = !drawer" />

      <v-btn
        icon
        @click.stop="clipped = !clipped"
      >
        <v-icon>mdi-application</v-icon>
      </v-btn>
      <v-btn
        icon
        @click.stop="fixed = !fixed"
      >
        <v-icon>mdi-minus</v-icon>
      </v-btn>
      <v-toolbar-title v-text="title" />
      <v-spacer />
    </v-app-bar>
    <v-content>
      <v-container>
        <nuxt />
      </v-container>
    </v-content>
    <v-navigation-drawer
      v-model="rightDrawer"
      :right="right"
      temporary
      fixed
    >
      <v-list>
        <v-list-item @click.native="right = !right">
          <v-list-item-action>
            <v-icon light>
              mdi-repeat
            </v-icon>
          </v-list-item-action>
          <v-list-item-title>Switch drawer (click me)</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-footer
      :fixed="fixed"
      app
    >
      <span>&copy; 2019</span>
    </v-footer>
  </v-app>
</template>

<script>
import {db} from '@/plugins/firebase'
import firebase from 'firebase/app'
import 'firebase/auth'

export default {
  created() {
    this.$store.dispatch('setSession');
  },
  data () {
    return {
      clipped: false,
      drawer: false,
      fixed: false,
      items: [
        {
          icon: 'mdi-apps',
          title: 'Welcome',
          to: '/'
        },
        {
          icon: 'cart',
          title: 'Checkout',
          to: '/checkout'
        }
      ],
      miniVariant: false,
      right: true,
      rightDrawer: false,
      title: 'Vuetify.js'
    }
  },
  methods: {
    login() {
      console.log('login');
      let provider = new firebase.auth.GoogleAuthProvider();
      firebase.auth()
      .signInWithPopup(provider)
      .then(function(result) {
        console.log('signed in');
      })
      .catch(function(error) {
        console.log(error);
      })
    },
    logout() {
       console.log('logout');
       firebase.auth()
       .signOut()
       .then(() => {
         console.log('sign out')
       }).catch((error) => {
         console.log(error)
       })
    }
  },
  computed: {
    mySession() {
      return this.$store.getters.session;
    }
  }
}
</script>

store / index.js

import Vuex from 'vuex'
import firebase from 'firebase/app'
import 'firebase/auth'

const createStore = () => {
  return new Vuex.Store({
    state: {
        session: false
    },
    mutations: {
        SET_SESSION(state, session) {
            state.session = session;
        }
    },
    getters: {
        session: state => state.session
    },
    actions: {
        setSession({commit}) {
            firebase.auth().onAuthStateChanged(user => {
                console.log(user);
                console.log('change');
                commit('SET_SESSION', user || false);
            })
        }
    }
  })
}

export default createStore

在控制台中，我收到一条错误消息：

“ [vuex] unknown action type: setSession”

重申一下，我可以使用Google oauth登录，但是登录后状态不会更改，并且不会显示注销按钮。

感谢您的帮助！

更新：

好吧，我很困惑。我在15分钟前确实推送了更新，但由于某种原因，我的store / index.js文件已过时并且没有更新/保存？我不知道我在做什么错。

在Github上查看我的store / index.js文件时，它显示了默认模板： https://github.com/SIeep/US-kratom/blob/master/US-Kratom/store/index.js

但是我所拥有的，以及我所学课程中刚刚复制的是：

import Vuex from 'vuex';
import firebase from 'firebase/app';
import 'firebase/auth';

const createStore = () => {
  return new Vuex.Store({
    state: {
      session: false,
      products: []
    },
    mutations: {
      SET_SESSION(state, session) {
        state.session = session;
      },
      SET_PRODUCT(state, product) {
        state.products = product;
      }
    },
    getters: {
      session: state => state.session,
      products: state => state.products
    },
    actions: {
      setSession({ commit }) {
        firebase.auth().onAuthStateChanged(user => {
          commit('SET_SESSION', user || false);
        });
      },
      setProduct({ commit }, products) {
        commit('SET_PRODUCT', products);
      }
    }
  });
};

export default createStore;

我正在保存文件和所有内容，但是在Github上没有更新，这显然也是我的应用程序存在的问题。

Answer 1

Thinkster.io的Erik最终为我修复了代码。更新在这里：

[https://github.com/SIeep/US-kratom/commit/bd55deacadfc065edc7df9c1365ae832a32b9b43][1]

在Vuex商店中找不到操作

1 个答案: