Question

我是Vue的新手并设法让我的第一个应用程序出现一些故障，但到目前为止我真的非常喜欢它。我使用了一个视频教程，该教程从vue-cli项目创建开始，由于webpack的原因，它们是不同的。

我已经创建了该项目，该项目主要完成了它现在应该做的事情我正在尝试进行一些重构，其中包括干掉代码。

在每个页面上，我想访问存储在cookie文件中的变量，我在脚本部分的HomeComponent上完成了保存和读取，并按照承诺工作。

<script>
import MenuComponent from '@/components/MenuComponent.vue'
import Typewriter from '@/components/vue-type-writer.vue'

export default {
  name: 'HomeComponent',
  components: {
    MenuComponent,
    Typewriter
  },
  prop:{
      isPlaying: Boolean,
      username: String,
      currentSound: Object
  },
  data() {
      return{
         currentSound: null,
         isPlaying: false,
         username: ''
      }
  },
  methods:{
   clickButton() {
      this.msg= 'test 2'
   },
   toggleSound(){
      var a = this.currentSound;

      if (a.paused) {
        a.play();
        this.isPlaying = true;
      } else {
        a.pause();
        this.isPlaying = false;
      }
   },
   getCookieInfo(){
      var value = "; " + document.cookie;
      var parts = value.split("; weegreename=");
      if (parts.length == 2)
         this.username = parts.pop().split(";").shift();
      else this.username = '';
   },
   seveFormValues (submitEvent) {
      this.username = submitEvent.target.elements.name.value;
      this.$refs.audio1.pause();
      this.$refs.audio2.play();

      var expires = "";
      var days = 31;
      if (days) {
         var date = new Date();
         date.setTime(date.getTime() + (days*24*60*60*1000));
         expires = "; expires=" + date.toUTCString();
      }
      document.cookie = "weegreename=" + (this.username || "")  + expires + "; path=/";

    }
  },
   mounted(){
      this.isPlaying = true;
      this.getCookieInfo();
      if (this.username) this.currentSound = this.$refs.audio2;
      else this.currentSound = this.$refs.audio1;
      this.currentSound.play();
   }
}
</script>

现在在每个子页面上，我想访问getCookieInfo()方法来检查用户名设置的ID。

我试过在main.js的主App.vue脚本部分添加它

new Vue({
  router,
  render: h => h(App),
  methods: {
    //here the getCookieInfo code from above
  }
}).$mount('#app')

在方法中创建了一个新组件，然后尝试通过componentname.method在主应用中访问它们，如下所示。

import CookieComponent from '@/components/CookieComponent.vue'

export default {
   // prop:{
   //    isToggled: Boolean
   // },
     components: {
       MenuComponent,
       CookieComponent
     },
   data() {
      return{
         isToggled: false
      }
   },
   methods:{
      clickToggle() {
         this.isToggled = !this.isToggled;
      },

   },
   mounted(){
      CookieComponent.getCookieInfo();
   }
}

我现在不知道最好的方法，我将来会学到更多，但这个项目是时间敏感的 - 我决定通过为我的客户制作一个简单的网站来学习vue：）

Answer 1

如果您在每个页面上都需要它，可以将其放入App.vue。从那里你有三个选择：

将数据作为道具传递给子组件。
创建一个事件总线并将数据发送到任何需要它的组件。
使用Vuex存储数据并从组件中访问它。

如果您真的想将Cookie数据保留在组件中，则需要将组件链放在组件链中。

https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

根据您的链条的深度以及您拥有多少兄弟组件，这可能会变得非常混乱，在这种情况下，Vuex或事件总线可能是一个更好的主意。

不要尝试做以下事情：

CookieComponent.getCookieInfo();

请查看文档以查看有关如何进行组件通信的良好示例。

Answer 2

对于那种东西，最佳做法是使用状态。它将保存您的应用程序的数据，并允许您跨所有组件/页面访问它们。

您可以看到simple state management in the Vue doc，或直接使用VueX，即Vue的官方状态管理库。

总结一下它的工作原理（使用VueX）：

您创建了一个cookieStore：

// Where data will be saved
const state = { cookie: {} }

// Getters allow you to access data
const getters = { cookie: state => state.cookie }

// Mutations allow you to modify the state
const mutations = {
  // Set cookie data
  saveCookie (state, cookieData) {
    state.cookie = cookieData
  }
}

在您的HomeComponent中，您将获得cookie信息，并将其保存商店：this.$store.commit('saveCookie', cookieData)
在所有其他组件中，您无需从Cookie中获取Cookie信息，而是可以从商店访问已保存的数据并使用它执行所需操作：this.$store.getters.cookie

Vue.js访问组件方法还是父方法？

2 个答案: