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;
    width: 32px;
    height: 32px;
    cursor: pointer;
  }
.header span:first-child{
  background: red;
}

.header span:last-child {
  background: blue;
}

</style>

header.vue