Vuex 简介

 

1. 概念

 

在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间的通信

 

2. 使用场景

 

多个组件依赖于同一状态

 

来自不同组件的行为需要变更同一状态

 

3.  Vuex 工作原理

 

State 是存储的单一状态，是存储的基本数据（把改变的数据给到 Vue Components）

 

Getters 是 store 的计算属性，对 state 的加工，是派生出来的数据。就像 computed 计算属性一样，getter 返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算

 

Actions 像一个装饰器，提交 mutation，而不是直接变更状态（actions 可以包含任何异步操作，如果有什么限制判断条件，也是在 actions 中进行操作）

 

Mutations 提交更改数据，使用 store.commit 方法更改 state 存储的状态（在 Mutations 不做任何判断等操作，只做数据的处理，如果不需要进行异步处理，可以直接把数据交到这里）

 

Module 是 store 分割的模块，每个模块拥有自己的 state、getters、mutations、actions

 

Vuex 提供了 mapState、MapGetters、MapActions、mapMutations 等辅助函数给开发在 vm 中处理的 store

 

这里有一个很好理解 Vuex 的方法：把 Vue Components 当作是去餐厅吃饭的顾客，Actions 就是餐厅的服务员，Mutations 是餐厅的后厨，State 是做好的菜，最后再展现给顾客。所以有什么需求找 Actions 说就可以了，Mutations 只负责做菜

 

4. 搭建 Vuex 环境

 

1）打开 VScode 的控制台，输入 npm i vuex 进行安装，也可以通过 Vuex 进行下载安装

 

2）创建一个 store 文件夹，且在该文件夹中创建一个 index.js 文件，文件中引入 import vuex from 'vuex'，通过 Vue.use(Vuex) 就可以使用它了

 

3）在该 index.js 文件中配置 store，并配置暴露相关对象 export default new Vuex.Store({})

 

4）再在 main.js 文件中引入 store，import store from './store' （这里引入的其实是 store 文件夹下的 index.js 文件，因为默认找的就是文件夹的 index ，所以可以不写），在 Vue 实例对象中引用，即写上 store，这样组件实例对象和 vm 上就都能看到 store 了

 

下面我们用 vuex 来写一个案例：（最终的页面效果如下图所示）

 

前面进行选择每次要加的数，点击加号可往上加，点击减号也会对应的减，当当前求和的为奇数时，后一个按钮才有效，等一等再加，就是延迟 0.5 s 后再加

 

Count.vue 计算组件代码（实现页面的布局和调用方法）

 

<template>

 

    <!-- 实现页面的布局 -->

 

    <div>

 

        <h1>当前求和为:{{$store.state.sum}}</h1>

 

        <select v-model.number="n">

 

            <option value="1">1</option>

 

            <option value="2">2</option>

 

            <option value="3">3</option>

 

        </select>

 

        <button @click="increment">+</button>

 

        <button @click="decrement">-</button>

 

        <button @click="incrementOdd">当前求和为奇数再加</button>

 

        <button @click="incrementWait">等一等再加</button>

 

    </div>

 

</template>

 

<script>

 

export default {

 

    name:'Count',

 

    data(){

 

        return {

 

            n:1,  //用户选择的数字

 

        }

 

    },

 

    methods: {

 

        increment(){

 

            this.$store.commit('ADD',this.n)

 

            //通过 commit 调用 Mutations 里面的 ADD 方法

 

        },

 

        decrement(){

 

          this.$store.commit('DECREASE',this.n)

 

           //通过 commit 调用 Mutations 里面的 DECREASE 方法

 

        },

 

        incrementOdd(){

 

          this.$store.dispatch('addOdd',this.n)

 

          // 通过 dispatch 调用 actions 里面的 addOdd 方法

 

        },

 

        incrementWait(){

 

          this.$store.dispatch('addWait',this.n)

 

          // 通过 dispatch 调用 actions 里面的 addWait 方法

 

        },

 

    },

 

}

 

</script>

 

<style lang="css">

 

    button{

 

        margin-left: 5px

 

    }

 

</style>

 

组件中读取 vuex 中的数据：$store.state.sum 

 

组件中修改 vuex 中的数据：$store.dispatch('actions中的方法名'，数据) 或 $store.commit('mutations中的方法名'，数据)

 

Store 文件夹中的 index.js 代码（用 vuex 配置相关的函数或方法）

 

//该文件用于创建 Vue 中最核心的 store

 

import Vue from 'vue'

 

//引入Vuex

 

import Vuex from 'vuex'

 

// 应用 Vuex 插件

 

Vue.use(Vuex)

 

//准备 actions 用于响应组件中的动作

 

const actions = {

 

    // 实现为奇数的时候才加操作

 

    addOdd(context,value) {

 

        if (context.state.sum % 2) {

 

            context.commit('ADDODD',value)

 

        }

 

    },

 

    // 实现等到 0.5 s 才加的操作

 

    addWait(context, value) {

 

        setTimeout(() => {

 

            context.commit('ADDWAIT',value)

 

        }, 500);

 

    }

 

}

 

//准备 mutations 用于操作数据（state）

 

const mutations = {

 

    //加操作

 

    ADD(state,value) {

 

        state.sum += value

 

    },

 

    //减操作

 

    DECREASE(state, value) {

 

        state.sum -= value

 

    },

 

    ADDODD(state, value) {

 

        state.sum += value

 

    },

 

    ADDWAIT(state, value) {

 

        state.sum += value

 

    }

 

}

 

//准备 state 用于存储数据

 

const state = {

 

    sum: 0  //当前的和

 

}

 

//创建并暴露 store

 

export default new Vuex.Store({

 

    actions,

 

    mutations,

 

    state

 

})

 

其中 actions 对象中的每个方法都有一个 context 和 value 形参，context 里面存放着基本你要用的所有数据，value 就是你传进来的数据

 

其中 mutations 对象中的每个方法都有 state 和 value 形参，第一个里面存放有 state 中的数据，value 也是传进来的数据

 

App.vue

 

<template>

 

  <Count />

 

</template>

 

<script>

 

import Count from './components/Count.vue'

 

export default {

 

  name: "App",

 

  components: {

 

    Count,

 

  },

 

}

 

</script>

 

main.js

 

//引入 Vue 

 

import Vue from 'vue'

 

//引入 App 

 

import App from './App.vue'

 

//引入 store

 

import store from './store/index.js'

 

Vue.config.productionTip = false

 

const vm = new Vue({

 

  render: h => h(App),

 

  store,  //使用 store

 

}).$mount('#app')

 

案例到这里就结束啦——下面来看看 vuex 中的 getters 配置项