小编raf*_*fff的帖子

我使用vuex和vuejs 2在一起.

我是新手vuex,我想看一个store变量.

我想watch在我的功能中添加功能vue component

这是我到目前为止:

import Vue from 'vue';
import {
  MY_STATE,
} from './../../mutation-types';

export default {
  [MY_STATE](state, token) {
    state.my_state = token;
  },
};

我想知道是否有任何变化 my_state

我如何store.my_state在我的vuejs组件中观看？

我正在使用vuejs 2,我在使用Google身份验证时遇到问题.

我成功设置并使用vue进行了注销和用户配置文件功能:

export default {

  data() {
    return {
      user: null
    };
  },

  methods: {
    getUserProfile() {
          const profile = gapi.auth2.currentUser.get().getBasicProfile();

          console.log(profile.getIdToken());
      },

      signOut() {
          const auth2 = gapi.auth2.getAuthInstance();

          auth2.signOut().then(function () {
              console.log('user signed out');
          });
      }
  },
};

我的主要问题是onSignIn(googleUser)来自的功能

<div class="g-signin2" data-onsuccess="onSignIn"></div>

在data-onsuccess="onSignIn"正在寻找VUE实例之外的js函数.我尝试onSignIn(googleUser)在我的HTML文件中添加该功能,如:

<script>
    function onSignIn(googleUser) {
        const auth2 = gapi.auth2.init();

        if (auth2.isSignedIn.get()) {
            const profile = auth2.currentUser.get().getBasicProfile();

            console.log(profile.getName());
            console.log(googleUser.getAuthResponse().id_token);
            console.log(googleUser.getAuthResponse().uid);
            console.log(auth2.currentUser.get().getId());
        }
    }
</script>

这按预期工作,但我想知道是否可以在我的vue文件而不是本机javascript方式中添加它,因为在此函数内部,我将调用其他vue方法.

或者有没有办法我可以onSignIn(googleUser)在vue中添加该功能,然后在Google Auth完成时调用它？

我在我的项目中使用 vue-router。

我能够完美地导航到我的命名路线。我唯一的问题是当我使用需要参数的命名路由时，刷新页面时它不会加载。

这是我的路线：

'/example/:username': {
    name: 'example-profile',
    title: 'Example Profile',
    component: ExampleComponent
}

这就是我使用的方式vue-router route：

<a v-link="{ name: 'example-profile', params: { username: raaaaf } }">
    Example Link
</a>

当我选择时，Example Link我得到mydomain.com/example/raaaaf.

在第一次加载时，它呈现正确的模板，但是当我刷新或手动输入地址栏上的链接时，我被重定向到我的Page Not Found页面，并且不会触发创建页面时调用的方法。

这是我的ExampleComponent：

    <template>
    <div class="small-12 left">
        <side-bar></side-bar>
        <div class="store-right">
            <store-details></store-details>
            <store-menu></store-menu>
            <store-listings></store-listings>
        </div>
    </div>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    username: null,
                    user: null,
                }
            },
    
            created() {
                this.getUser()
            },
    
            methods: {
                getUser() { …

在 VueJs 文档中，https://vuejs.org/guide/custom-directive.htmlVue.directive我可以使用本机方法 轻松创建自定义指令

我的问题是你如何能够在export default {}

与注册组件或 prop 时相同：

components: {
   Component1, Component2
},
methods: {
   method1() {
    // code here
   }
},