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}
}