以下内容可直接用编辑器打开查看
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vuex的使用</title>
</head>
<body>
<!--
1.组件之间共享数据的方式:
父组件向子组件传值:v-bind属性绑定
子组件向父组件传值:v-on事件绑定
兄弟组件之间的数据共享:EventBus事件中心
2.vuex:实现组件全局状态数据管理的一种机制,可以方便实现各个组件之间的数据共享,存储在vuex中的数据都是响应式的
3.vuex的基本使用
下载:npm i vuex --save
导入:import Vuex from 'vuex'
安装:Vue.use(Vuex)
创建vuex实例对象:const store =new Vuex.Store({
state为存储全局共享的数据
state:{
a:1
}
})
将实例挂载vue实例中:new Vue({
el:'#app',
renser:h=>h(app),
router,
stotre
})
4.vuex的核心概念:state(唯一公共数据源),mutations(只有它有权利改变state的数据),actions(异步的操作),
getters(用于对state中的数据进行加工处理形成新的数据,不会直接修改state的数据,只起到包装作用,类似vue的计算属性)
export default new Vuex.Store({
state:{
a:0
},
mutations:{
add(state,step) {
state.a+=step
}
},
actions:{
addAsync(context,step) {
setTimeout(()=>{
context.commit('add',step)
},1000)
}
},
getters:{
show:state => {
return '当前最新的数量是"+state.a+" '
}
}
})
在组件中访问state中的数据:this.$store.state.全局数据名称(a);注意如果用{{$store.state.a}}this可以省略
mutations中的数据说明add为事件名,state为固定写法表示state数据源对象,step为接受数据的形参;
在组件中methods的事件中使用:this.$store.commit('mutations中对应的事件名例add',8)触发,8为传递过去的数据
actions中的数据说明addAsync为异步事件名,context为固定写法表示mutations事件对象,context.commit固定写法
表示查找mutations某个事件对象;step为接受数据的形参
在组件中methods的事件中使用:this.$store.dispatch('异步函数名addAsync',8)来触发,8为传递过去的数据
getters中的数据说明show为事件说明,state为固定写法表示数据对象,state中的数据发生变化对应 getters中相应包装数据
也会发生变化
在组件中使用:this.$store.getters.名称(show),注意如果用{{$store.getters.show}}this可以省略
-->
</body>
</html>
小结:
state对象为vuex的唯一的公共数据源;
mutations只有它有权利可以改变vuex的公共数据;
actions一般处理异步的操作,想改变公共数据,需要借助mutations来实现;
getters类似vue的计算属性,不能直接改变公共数据,只对公共数据起到包装的作用,而公共数据的变化也会影响其包装出来的数据;
在vue组件中事件调用的时候是可以传递参数的,对应vuex中使用第二个形参接收
结语:如有错误之处,望请不吝赐教