六、Vuex介绍

一、Vuex介绍

当我们在Vue对象中定义一个变量时，想要在其他的Vue对象或者js文件中想使用这个变量往往是很不容易的，而且Vue对象中的变量随着Vue销毁而销毁，所以需要一个全局的公共的数据仓库来管理这些变量，让这些变量的可以在任意组件中使用，它有着自身的生命周期，不会随着某一个Vue对象的销毁而销毁
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它用以在不同的Vue对象中维护一个统一的数据仓库，并记录用户对数据仓库的操作，便于开发者随时了解和追踪数据仓库的变化和来源

二、Vuex基本使用

1. 在codesandbox创建一个Vue项目
   打开https://codesandbox.io/s/vue
   在上面注册一个账号，并新建一个Vue项目

2.添加Vuex依赖

添加Vuex依赖

点击左侧 Add Dependency蓝色按钮，搜索Vuex

选择Vuex依赖

点击第一个Vuex添加

添加Vuex依赖成功
如上图箭头所示Vuex依赖已成功添加

3. 引入vuex和初始化vuex仓库

在src目录下新建store文件夹和index.js

vuex仓库

并向index.js增加如下代码

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    CHANGE(state, value) {
      state.count = value;
    }
  },
  actions: {
    add({ commit, state }) {
      commit("CHANGE", state.count + 1);
    },
    reduce({ commit, state }) {
      commit("CHANGE", state.count - 1);
    }
  }
});

export default store;

在src/main.js新增如下代码

import store from "./store/index";

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

修改App.vue为如下代码

<template>
  <div id="app">
    <button @click="reduce">-</button>
    <div>{{count}}</div>
    <button @click="add">+</button>
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    add() {
      this.$store.dispatch("add");
    },
    reduce() {
      this.$store.dispatch("reduce");
    }
  }
};
</script>

<style>
#app {
  display: flex;
  justify-content: center;
}
</style>

我们的vuex计数器便完成了，点击右侧刷新来查看这个计数器

计数器

三、Vuex概念介绍

1. state

state是vuex中的数据仓库，我们把需要存放的数据放到state中，并在页面中通过使用this.$store.state来获取这个数据

定义state
使用state中的数据

2. mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件，我们通过定义mutations中的方法来修改state,如下图所示，定义了CHANGE方法，它会把传入的value赋值给state.count

mutations

3. action

action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更状态
• Action 可以包含任意异步操作

如下图所示，我们定义了两个action，一个是add负责增加count，另一个是reduce负责减少count，它们通过调用commit('名称', 值)的方式来调用上面定义的mutation实现对state的修改

action定义

在页面中我们通过调用this.$store.dispath('action名称')来调用action

action使用
三、Vuex在不同页面中使用

1. 新建一个操作组件,如下图所示我们在components文件夹下新建一个operate.vue组件

   
   操作组件
2. 在operate.vue中添加如下代码

<template>
  <div class="operate_box">
    <input type="number" v-model="count">
  </div>
</template>

<script>
export default {
  computed: {
    count: {
      get: function() {
        return this.$store.state.count;
      },
      set: function(value) {
        this.$store.dispatch("setCount", value);
      }
    }
  }
};
</script>

3. 在App.vue中引入该组件,新增如下代码导入组件

<template>
  <div>
    <operate></operate>
  </div>
</template>
<script>
import operate from "./components/operate.vue";
export default {
  components: {
    operate
  }
};
</script>

4. 修改Vuex的store新增setCount方法

const store = new Vuex.Store({
  actions: {
    setCount({ commit }, value) {
      commit("CHANGE", value);
    }
  }
});

5.可以看到我们在operate.vue中也可以展示和改变Vuex中的数据

Vuex不同组件

codesandbox代码