vuex管理登录状态,vuex状态管理几种状态

　　本文主要介绍了vuex状态管理数据的状态查询和变更方法，具有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。

状态管理数据状态查询与更改

1.main.js里引入状态管理

　　从导入存储。/商店

　　新Vue({

　　埃尔： #app ，

　　路由器，

　　店，

　　组件：{ App }，

　　模板：“应用程序/”

　　})

2.store的创建

　　从“vue”导入Vue

　　从“vuex”导入Vuex

　　从导入错误日志。/模块/用户

　　const getters={

　　name: state=state.user.name，

　　}

　　Vue.use(Vuex)

　　const store=new Vuex。商店({

　　模块：{

　　用户

　　吸气剂

　　})

　　导出默认存储

　　user.js中的内容只定义了一个方法来修改存储中的名称。

　　由于在vuex中更改存储的唯一方法是提交突变，因此突变中的相应方法可以通过调用实例化的vuex来更改状态值，其中名称可以是参数对象或单个值。state参数在被调用时默认为第一个参数，但是在突变中声明函数时必须传入状态。

　　突变：{

　　SET_NAME: (state，name)={

　　state.name=name

　　}

　　导出默认用户

　　在子组件中，state中变量的值由此。子组件中的$ store.state.variable名称。

　　这里的用户名=this.store.state.name//The名是存储在vuex中的状态的变量名。

　　通过这个更新/插入vuex中的数据状态。子组件中的$store.commit((方法名，参数)。

　　//更新子组件中存储区的状态

　　This.store.commit (name ，userName)//其中userName是传入的参数

vuex数据管理，组件数据一一对应

　　要求：我们点击拍照后，会把拍下的图片放入vuex的状态来管理和调用其他组件(这里命名为组件A和组件B)。

1.组件A：我们拿到图片数据源

　　并在点击拍照时创建一个当前时间，将图片来源和时间作为对象提交给vuex。

　　var URL=canvas . toda taurl()；

　　var date=新日期()。托LocaleTimeString()

　　这个。$store.commit(canvass ，{url，date })；

2. vuex（首先要记得下载和安装vuex，此处省略）

　　从“Vue”导入Vue；

　　从“Vuex”导入Vuex；

　　vue . use(Vuex)；

　　var={//要设置的全局访问的状态对象

　　拉票：[]//图片和时间都保存在这里。

　　};

　　Var getters={//实时监控状态值的变化(最新状态)

　　GetCanvass(state) {//携带GetCanvass更改后的值，调用组件b。

　　返回state.canvass

　　}

　　};

　　var突变={

　　Canvass(state，datalist){ //组件A提交的数据保存在Canvass中。

　　state.canvass.unshift(数据列表)

　　}

　　};

　　var操作={

　　};

　　var store=new Vuex。商店({

　　状态，

　　吸气剂，

　　突变，

　　行动

　　});

　　导出默认存储；

3.组件B

　　超文本标记语言

　　！-时间-

　　ul class=row1

　　里

　　v-for=i in imglist

　　:key=i.url

　　@click=doImg(i.url) //将回收的图片数据存储在组件数组中，让时间和图片一一对应。

　　class=无限列表项

　　El-button size= small { I . date } }/El-button

　　/李

　　/ul

　　！-当imglist数组中有数据时，渲染imglist中的数据，当用户点击按钮时，显示url数组中的数据-

　　！-image v-if判断当imglist.length0至少为一条数据时将渲染DOM

　　img :src=flag？imglist[0]。URL:URL class= image v-if= img list . length 0 /

　　某视频剪辑软件

　　data() {

　　返回{

　　Imglist: []，//默认图片时间数据

　　Url: []，//点击按钮后对应的图片时间数据

　　标志：正确

　　};

　　已创建(){

　　this.imglist=this。$ store . getters . get canvass；//在vuex的getters中获取canvass数据

　　}

　　方法：{

　　doImg(url) {

　　this.url=url.split(？);//点击按钮将图片时间数据保存到当前最近的url数组中。

　　this.flag=false

　　}

大致效果

　　这样，当我们不拍照就进入这个页面时，就会是一片空白。当然，拍照后我们会进入这个页面，默认会显示最新的。在组件A中拍了几张照片后，组件B会显示几个时间点。点击不同时间点的右侧，可以看到不同时间点拍摄的照片。

　　以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。