vuex

Vuex

一、介绍

1.1 介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 **集中式存储 **管理应用的所有组件 的 状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.2 概念

1. vuex 是一个状态管理工具
2. vuex 也是单向数据流的。
3. 集中式的管理项目中组件间需要共享的状态
4. 解决项目中比较混乱的状态共享的方法（父子组件通信传值、事件总线、跨组件传参）
5. vuex 中定义了一些规则，我们要按照规则来进行状态的管理。
   

1.3 基本使用

1. 多组组件公用全局状态 在 state 的数据 任何组件都可以使用
2. 全局状态发生改变所有的组件都会自动更新 commit -> mutations 来修改 state

二、核心概念

1. 开始

启动 vuex 需要创建一个 store，利用 store 来管理 state、actions、mutations。

1. Vue.use(Vuex)
2. new Vuex.Store(options)
3. 将 store 注入的根实例

// store/index.js 文件

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

Vue.use(Vuex);

export default new Vuex.Store({
   
  state: {
   },
  getters: {
   },
  mutations: {
   },
  actions: {
   },
  modules: {
   },
});

// main.js 文件
new Vue({
   
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

2. state

vuex 采用单一状态树，在一个 store 创建一个 state 即可。

export default new Vuex.Store({
   
  state: {
   
    name: "吴彦祖",
    age: 18,
  },
});

在组件中获得 state 的值

this.$store.state.name
注意：vuex 推荐使用 computed 来取用 store 中的状态（组件要使用的是响应式的数据）

<template>
  <div id="app">
    {
   {
   this.$store.state.name}}--{
   {
   this.$store.state.age}}
  </div>
</template>

3. mutations

1. 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

2. mutations 内部的方法通过 commit 触发 this.$store.commit(‘mutions 的方法名’,参数)

// store/index.js 文件
export default new Vuex.Store({
   
  // 全局状态
  state: {
   
    name: "吴彦祖",
    age: 18,
  },

  // 修改state的方法，只有mutations才能修改state
  mutations: {
   
    changeName(state, payload) {
   
      // 参数1是全局状态值，
      // payload是传参
      state.name = payload;
    },
  },
});

注意：我们不能直接调用 mutations 中的方法，而是要像触发事件一样的形式来调用, 实则是在调用 store 的 commit 方法来进行 mutations 方法的调用（提交一个 mutation

// 随意组件的文件
<template>
  <div id="app"