获取数量和vuex

使购物车的徽标数字和购买数量一致

1. 当数字选择框改变时，把购买的数量传递给父组件，子组件向父组件传值（事件调用）
2. 事件调用的本质：父组件向子组件传递方法，子组件调用这个方法，同时把数据当作参数传递这个方法

getSelectedCount(count){
    this.selectedCount=count
}

3. 在子组件中监听文本框的change事件，每当文本框数据被改变的时候，立即把最新的数据传递给父组件

countChanged(){
    this.$emit('getcount',parseInt(this.$refs.numbox.value))

}

---

vuex

1. 是vue配套的公共数据管理工具，它可以把一些共享的数据保存到vuex中，方便整个程序的任何组件直接获取或修改公共数据
2. vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而无需通过父子组件传值
3. props和vuex和data的区别：
   • vuex是一个全局的共享数据存储区域，就相当于是一个数据的仓库
   • data存放组件内部的私有数据
   • props存放父组件传递的数据
4. 安装vuex

npm i vuex --save

5. 在模块打包系统中显式的通过Vue.use()来安装vuex

import Vuex from 'vuex'
Vue.use(Vuex)

6. new一个Vuex.store()实例得到一个数据仓储对象，state可以当作组件中的data用来存储数据

var store=new Vuex.store({
    state:{ 
count:0
},

    mutations:{}
})

7. 并在vm实例中挂载，与路由挂载相同，只要挂载到vm中，任何组件都能使用store来存取数据

store:store

8. 获取vuex中的数据

9. 如果要操作store中的state值，只能通过调用mutations提供的方法才能操作对应的数据，不推荐其他组件使用时直接操作（想要增加count值在其他组件中就调用这个increment方法）

mutations:{
    increment(state){
        state.count++
    }
}

this.$store.commit('increment')

10. mutations中的方法最多只能传入2个参数，参数一是state状态，参数二是通过commit提交 过来的参数
11. getters只负责对外提供数据，不负责修改数据，与组件中的过滤器比较相似，都没有修改原数据，只是把原数据做了一层包装提供给调用者，与computed类似，只要state中的数据发生变化就会立马触发getter的重新求值

getter:{
    optCount:function () {
     return '最新count值：'+state.count   
    }
}

{{$store.getter.optCount}}

---