获取数量和vuex
2019-01-09 本文已影响0人
2764906e4d3d
使购物车的徽标数字和购买数量一致
- 当数字选择框改变时,把购买的数量传递给父组件,子组件向父组件传值(事件调用)
- 事件调用的本质:父组件向子组件传递方法,子组件调用这个方法,同时把数据当作参数传递这个方法
getSelectedCount(count){
this.selectedCount=count
}
<numbox @getcount="getSelectedCount"></numbox>
- 在子组件中监听文本框的change事件,每当文本框数据被改变的时候,立即把最新的数据传递给父组件
<input id="test" class="mui-input-numbox" type="number" value="1" @change="countChanged" ref="numbox"/>
countChanged(){
this.$emit('getcount',parseInt(this.$refs.numbox.value))
}
vuex
- 是vue配套的公共数据管理工具,它可以把一些共享的数据保存到vuex中,方便整个程序的任何组件直接获取或修改公共数据
- vuex是为了保存组件之间共享数据而诞生的,如果组件之间有要共享的数据,可以直接挂载到vuex中,而无需通过父子组件传值
- props和vuex和data的区别:
- vuex是一个全局的共享数据存储区域,就相当于是一个数据的仓库
- data存放组件内部的私有数据
- props存放父组件传递的数据
- 安装vuex
npm i vuex --save
- 在模块打包系统中显式的通过Vue.use()来安装vuex
import Vuex from 'vuex'
Vue.use(Vuex)
- new一个Vuex.store()实例得到一个数据仓储对象,state可以当作组件中的data用来存储数据
var store=new Vuex.store({
state:{
count:0
},
mutations:{}
})
- 并在vm实例中挂载,与路由挂载相同,只要挂载到vm中,任何组件都能使用store来存取数据
store:store
- 获取vuex中的数据
<input type="text" v-model="$store.state.count">
- 如果要操作store中的state值,只能通过调用mutations提供的方法才能操作对应的数据,不推荐其他组件使用时直接操作(想要增加count值在其他组件中就调用这个increment方法)
mutations:{
increment(state){
state.count++
}
}
this.$store.commit('increment')
- mutations中的方法最多只能传入2个参数,参数一是state状态,参数二是通过commit提交 过来的参数
- getters只负责对外提供数据,不负责修改数据,与组件中的过滤器比较相似,都没有修改原数据,只是把原数据做了一层包装提供给调用者,与computed类似,只要state中的数据发生变化就会立马触发getter的重新求值
getter:{
optCount:function () {
return '最新count值:'+state.count
}
}
{{$store.getter.optCount}}