对于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 ο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更新了,但是数据不是最新的,也是醉了);
------------------------------------------------后面填坑
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} }