使用vuex出現(xiàn)this.$store為undefined問題

使用的場景

在open_show中調用update_info的時候出現(xiàn)undefined

解決的思路

剛開始接觸vuex，碰到這個問題，首先就是搜索一下，別人的一般都是this.$store.state為undefined，還是沒有什么思路，然后我看了一下項目中別人寫的代碼中就可以調用，再看下目錄，難道和目錄有關，試了一下，并沒有什么作用，就換種思路，打印了一下this，發(fā)現(xiàn)this的指向出現(xiàn)問題。

this指向的解決方法

第一種：

methods: {
      update_info:function(self,data){
        alert(self.$store);
        self.$store.commit("info",data);
      },
      open_show: function () {
	     var self =this;
       this.update_info(self,this.flag);
       }
   }

第二種：

var self =this;
  export default {
	  methods: {
	      update_info:function(data){
	        alert(self.$store);
	        self.$store.commit("info",data);
	      },
	      open_show: function () {
	       this.update_info(this.flag);
	       }
       },
     created(){
		  self = this;
  }
}

當然以上的方法是解決特定場景下的this指向問題，即方法調用方法時，如果方法很多地方都調用的話，推薦使用第二種，第一種當方法公用時還需要修改，如果只是是單個調用，方法一推薦使用。

vuex使用token時$store一直undefined

報錯:Cannot read properties of undefined(reading '$store') at eval

先直接說解決方法，后面再一一分析。

解決方法

將then()中的普通函數(shù)換成箭頭函數(shù)，即可解決錯誤，該錯誤產生的原因其實是this的指向問題。

錯誤代碼展示：

分析原因

首先在main.js中對$store進行打印，觀察是否真的將store注冊到Vue實例中

打印結果：

控制臺能對$store進行打印，說明store是存在于vue中的，所以排除vuex安裝錯誤和store沒有注冊到實例例中的錯誤。

再觀察方法中如何調用store——直接使用this.$store，那么會不會是因為這里的this并不指向vue呢，經過上網查證，我在vue文檔中得到了這么一句話：

All lifecycle hooks are called with their 'this' context pointing to the Vue instance invoking it.

就是說，在Vue所有的生命周期鉤子方法（如created，mounted， updated以及destroyed）里使用this，this指向調用它的Vue實例，即(new Vue)。

因為在then()中使用了普通函數(shù)，而普通函數(shù)中的this不指向vue，自然無法找到vue.$store，

將普通函數(shù)換成箭頭函數(shù)之后，箭頭函數(shù)沒有自己的this, 它的this是繼承而來，所以箭頭函數(shù)內的this指向new Vue，也就是我定義的myVue，就可以使用this.$store了。

解決方法示例

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論