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:{test :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 οnclick="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更新了，但是数据不是最新的，也是醉了）；

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　-------------小学生