vuex之仓库数据的设置与获取
如果你之前使用过vue.js,你一定知道在vue中各个组件之间传值的痛苦,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,那么接下来我们就来学习一下vuex是如何修改状态值的。
1. 搭建Demo
使用vue create 项目名创建一个项目,在src根目录下创建一个components目录并在该目录下面创建2个组件:header.vue,content.vue,在App.vue根组件中进行引入然后展示,删除不必要的组件。
<template> <div style="height:60px;" class="header"> <span></span> <span></span> </div> </template> <script> export default { } </script> <style> .header span{ display: inline-block; 32px; height: 32px; cursor: pointer; } .header span:first-child{ background: red; } .header span:last-child { background: blue; } </style>
<template> <div class="content" :style="`background: pink`"> Content </div> </template> <script> export default { mounted(){ } } </script> <style> .content { height: 600px; text-align: center; line-height: 600px; } </style>