博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vuex state 状态浅解
阅读量:4602 次
发布时间:2019-06-09

本文共 2247 字,大约阅读时间需要 7 分钟。

 对于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)意义是不一样的,毕竟后面是官方给出的方法,是为了记录状态改变的记录。但是就改变数据的效果而言,两者似乎是一样的,我在代码中自行尝试了下,两者的赋值都是以下效果:

{
{$store.state.userinfo.test}}{
{test}}

//完整的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}    }

 

转载于:https://www.cnblogs.com/ylHeyden/p/7479994.html

你可能感兴趣的文章
08. 删除重复&海量数据
查看>>
重新想象 Windows 8 Store Apps (71) - 其它: C# 调用 C++
查看>>
发布mvc遇到的HTTP错误 403.14-Forbidden解决办法
查看>>
记录一些好用的工具
查看>>
超链接样式设置(去下划线)(转)
查看>>
restcontroller和controller区别
查看>>
2016012003+陈琦+散列函数的应用及其安全性
查看>>
Android 状态栏通知Notification、NotificationManager详解
查看>>
Sublime Text 3中使用正则表达式删除空行
查看>>
UIApplicationDelegate协议
查看>>
再谈iOS 7的手势滑动返回功能
查看>>
Jmeter测试dubbo接口填坑
查看>>
python小练——找出指定目录下小于指定字节的文件,输出到文本文件
查看>>
渐渐磨砺--16年11月封闭总结
查看>>
[zz]GDB调试精粹及使用实例
查看>>
数据库的创建和删除
查看>>
最简单的三层实例【插入据
查看>>
设计模式学习笔记——Prototype原型模式
查看>>
pom.xml里有红叉报错的解决办法
查看>>
Perl last和next的用法区别
查看>>