您好,登录后才能下订单哦!
本篇内容介绍了“vuex状态管理数据状态查询与更改的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
import store from './store' new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' })
import Vue from 'vue' import Vuex from 'vuex' import errorLog from './modules/user' const getters={ name: state => state.user.name, }
Vue.use(Vuex)
const store = new Vuex.Store({ modules: { user }, getters }) export default store
user.js里的内容,只定义了一个修改store里name的方法。
由于vuex中store的改变唯一的途径是提交mutation,通过调用实例化后的vuex,mutations中相对应的方法可以实现对状态值的改变,其中name可以为参数对象,或者单个值,state参数在调用时默认为第一个参数可以不传,但是在mutations中申明该函数时必须传入state
mutations: { SET_NAME: (state, name) => { state.name = name } } export default user
在子组件中通过this.$store.state.变量名在子组件中访问state中某个变量的值
this.user.name = this.$store.state.name //这里的name为存储在vuex中state的变量名
在子组件中通过this.$store.commit(‘方法名’,参数)来进行对vuex中的数据状态进行更新/插入
//在子组件中更新store中的状态 this.$store.commit("name",userName)//其中userName为传入的参数
需求:我们点击拍照后将拍好的照片放入vuex的state里面管理,给其他的组件调用(此处以组件A,和组件B命名)
并且在点击拍照的同时创建一个当前时间,将图片源和时间以对象的形式提交vuex。
var url = canvas.toDataURL(); var date=new Date().toLocaleTimeString() this.$store.commit("canvass", {url,date});
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); var state={ //要设置的全局访问的state对象 canvass:[]//图片和时间保存在这 }; var getters = { //实时监听state值的变化(最新状态) getCanvass(state) { //承载变化的getCanvass的值 ,给组件B调用 return state.canvass } }; var mutations = { canvass(state,datalist){ //组件A提交过来的数据,给到canvass中保存 state.canvass.unshift(datalist) } }; var actions = { }; var store = new Vuex.Store({ state, getters, mutations, actions }); export default store;
html
<!-- 时间 --> <ul class="row1"> <li v-for="i in imglist" :key="i.url" @click="doImg(i.url)" //将循环到的图片数据存入组件的数组中,方便时间和图片一一对应 class="infinite-list-item" > <el-button size="small">{{ i.date }}</el-button> </li> </ul> <!-- 当imglist数组中有数据的时候渲染imglist中的数据,当用户点击按钮的时候显示url数组中的数据 --> <!-- 图片 v-if判断当imglist.length>0也就是最少有一条数据的时候才渲染该dom --> <img :src="flag?imglist[0].url: url" class="image" v-if="imglist.length>0" />
vue
data() { return { imglist: [], //默认的图片时间数据 url: [], //点击按钮后对应的图片时间数据 flag:true }; }, created() { this.imglist = this.$store.getters.getCanvass; //拿到vuex中getters中的canvass数据 } methods: { doImg(url) { this.url = url.split("???"); //点击按钮后将图片时间数据保存到当前最近的url数组中 this.flag=false } }
这样当我们没有进行拍照进入该页面的时候是空白显示,当然我们进行拍照了之后进入该页面,默认显示最新拍的哪一张,在组件A拍照了几张照片组件B就会显示几个时间点,点击不同的时间点右侧出现不同的时间点拍的照片
“vuex状态管理数据状态查询与更改的方法”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。