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>

 

<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>

 

<template>
  <div id="app">
    <Header></Header>
    <Content></Content>
  </div>
</template>

<script>
import Header from "./components/header";
import Content from "./components/content";
export default {
  // 注册组件
  components: {
    Header,
    Content
  }
};
</script>

<style>
</style>

 

页面效果：

 

下面需要实现点击红色按钮使得背景变为红色，点击蓝色按钮使得背景变成蓝色，下面使用vuex实现。

 

2. 设置和获取仓库中的数据

 先安装vuex。

yarn add vuex

在src根目录下创建store，然后创建一个index.js文件。

import Vuex from "vuex";
import Vue from "vue";

// 注册插件
Vue.use(Vuex);

// 创建仓库实例
const store = new Vuex.Store({
  // 仓库的数据
  state: {
    test_data: "this is some test data",
    color: "light-green"
  },

  // 同步修改state的值
  mutations: {
    // mutations下的方法第一个参数是固定state
    // 第二个参数是传进来的参数
    setColor(state, color) {
      state.color = color;
    }
  }
});

export default store;

 

实现后的代码

<template>
  <div style="height:60px;" class="header">
    <span @click="handleClick('red')"></span>
    <span @click="handleClick('blue')"></span>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(color){
      // 不推荐使用这个方法来修改state的值
      // this.$store.state.color = color;
      
      // this.$store.commit调用mutations下面的方法
      // 第一个参数就是mutations下面的的具体方法
      // 第二个参数就是传递给方法的参数
      this.$store.commit("setColor", color)
    }
  }
}
</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>

 

<template>
  <div class="content" :style="`background: ${$store.state.color}`">Content</div>
</template>

<script>
export default {
  mounted() {
    // this.$store当把仓库引入到main.js的时候,组件可以通过this.$stroe获取仓库的数据
    console.log(this.$store);
  }
};
</script>

<style>
.content {
  height: 600px;
  text-align: center;
  line-height: 600px;
}
</style>

 

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store,
}).$mount('#app')