vuex的使用

最近做项目的时候,有这么一个需求,在A页面跳转到B页面进行填写增加数据,并在返回A页面的时候要暂时回显到A页面,直至保存起来。

一开始做项目时,仅仅只是传递几个变量,所以只是用了跳转页面带参数的方法进行实现。现在跳转页面需要保存的数据特别多,而且,后续还会有多次跳转。每次跳转都带着很多数据的话是很不现实的,所以,研究了下vuex,完美解决了这个问题。

对于vuex的配置,这里就不多说了。

主要讲一下,在项目里如何使用:

首先是store文件夹下的index页面,目前我只用了state和mutations两个属性。

state属性:就是用来存放你需要保存的变量的地方。

                    //可以是变量、对象、数组等

比如:

state:{

       num:0,

}

在需要使用这些变量的时候,直接this.$store.state.(变量名) 调用和赋值就可以。

mutations属性:是用来改变state变量的。

里面的写法同vue页面中的methods写法一样,就是

updateNum(state,params){

    //params  就是你需要更新的变量

    //state中的数据需要state.变量名

     state.num = params   //全局变量num值就变成了params值

}

mutations属性里面的方法,什么时候被调用,就是在你想要更新state属性中的num值的时候。

那么如何在vue页面用这个呢?写法同子传父相似。

首先在vue页面的methods中,写一个方法:

//取的相同的名字,但不是一个方法,不要弄混

updateNum(){

        //参数1就是mutations中的方法名

        //参数2就是要将state中的num更新的变量

        //参数2可以是常量、变量、数组、对象。

        this.$store.commit('updateNum',newNum)

}

在需要更新state中的num的时候,this.updateNum() 就可以更新数值了。

如果只是临时保存,执行完后想要清空num,可以新建方法,在想要清空的时候调用。

clearNum(){

         this.$store.commit('updateNum',0)

}

this.clearNum() 后,state中的num就会变为0。

至此,一个完整的vuex的变量更新的操作就结束了。

用完,发现,比传值好用多了。只需要理清逻辑,知道在哪里更新,在哪里需要清空就可以了。

目前,就学到这么多,后续还会继续努力,加油!!!

(记录使用历程,写的不好,或者对大家有误导请见谅)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。