Vuex state 狀態淺解

 對於Vuex中的state里面的理解總是有些欠缺，機制似乎理解了。但是還有很多的不足，在這就先淺談下自己的理解。

　　vuex 機制中，定義了全局Store，在各個vue組件面的this.$store指向的都是同一個store庫，定義state狀態值，在mutaion寫入改變對應state里面的方法，哪里需要改變狀態值時，只需要commit對應的方法即可，如果是異步提交，則用dispatch。（這里說的比較簡單，想了解可以自行查閱vuex store機制）

let mutation = 
    {
        changeVal(state,value){
        console.log(value)
        state.userinfo.test = value;
        console.log(state.userinfo.test)
    }
};
let state = {
      userinfo:{userId:null}
}
Vuex.Store({
    state,
    mutations,
})                      //這里省略了一些，我這就只看state的簡單變化了，不涉及異步改變；

上面的代碼只是簡單的改變狀態值，若要異步操作，則需要用actions，這就不做討論。

　　現在來說說我的見解，本人理解，是全局的話，其實在各自組件中，通過this.$store.state.userinfo.test = 123;這種賦值和this.$store.commit("changeVal",123)意義是不一樣的，畢竟后面是官方給出的方法，是為了記錄狀態改變的記錄。但是就改變數據的效果而言，兩者似乎是一樣的，我在代碼中自行嘗試了下，兩者的賦值都是以下效果：

 <h3>{{$store.state.userinfo.test}}{{test}}</h3>
    <button onclick="cg"></button>//完整的html代碼就不寫了

js：
    //初始化
  this.$store.state.userinfo.test = "t";
  this.test = this.$store.state.userinfo.test;

    //方法
    cg(value = 123){
          this.$store.state.userinfo.test = value;
          this.$store.commit("getcheck",value);
    }
    
   

　　上面的兩種方式我都實驗了下，最后的效果是（在該view上），頁面上的test初始化后不會改變，頁面上的$store.state.userinfo.test，延時改變。即點擊兩次后頁面才會改變成123，並且我自己在代碼上試了下，把value分別改為1,2,3,4,5，點擊五次，頁面上的$store.state.userinfo.test分別為 t->t->1->2->3->4，test始終為t;兩者的效果都是這樣，說明改變state的值兩者都有效果，網上有人說，只能通過commit改變state似乎是有問題的，就一個全局的Store變量來看的話，各個組件改變相應的state的值。理論上應該也是可以的。自己測試了下，在另外的組件view上是可以更新數據的，只要進入其他view在該view改變state之后的話，都是能看到相應的效果。當然，在該頁面上直接改變this.test的值再提交即可，不必通過state賦值改變。

　　個人見解總結：1.state是可以通過this.$store.state賦值的；只要后面的view初始化，也會更新相應state的，當然最好的還是按官方來改變state；

　　　　　　　　　2 state在當前改變的view上會有延時效果。並且賦值給其他data變量不會成功。（這里面的原因，感覺應該是vue的dom重新刷新會運行在state狀態改變並賦值前，但這里就會有個問題，dom更新的條件應該是state改變，現在state改變了，然后dom更新了，但是數據不是最新的，也是醉了）；

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

------------------------------------------------后面填坑

　　　　1.對於上文說的this.$store.state.userinfo.test(后面簡稱$test),賦值給this.test后，改變后test不改變（即，上文說的賦值給data變量不會成功），針對的是$test是基本常量，如果$test是引用變量的話，this.test也會變化的。

　　　　2 $test在頁面里沒有更新，是因為sotore里面定義中沒有包含test，所以初始化時並沒有給$test監聽只需在store中定義即可解決(前面可能書寫錯誤),所以才會延時監聽

　　　　　　

const state = {
    userinfo:{userId:null}    
}

//定義后

const state = {
    userinfo:{userId:null, test:null}    
}