Vue学习（二十）vuex

vuex

概念

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

使用场景

1. 多个组件依赖同一状态。
2. 来自不同组件的行为需要变更同一状态。

vuex工作原理

下载Vuex

# 默认的下载是最高版本的
npm i vuex
	# 或
yarn add vuex
# 下载3版本的vuex
npm i vuex@3
	# 或
yarn add vuex@3

搭建Vuex环境

1. 创建文件src/store/index.js

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

import Vue from 'vue'

// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex);

// 准备actions  用于响应组件中的动作
const actions = {
   }
// 准备mutations    用于加工数据
const mutations = {
   }
// 准备state    用于存储数据
const state = {
   }
// 创建store
/* const store = new Vuex.Store({
    actions,
    mutations,
    state,
})
// 导出store
export default store */
// 创建并暴露store
export default new Vuex.Store({
   
    actions,
    mutations,
    state
})

2. 在main.js中创建vm时引入store配置项

// 引入Vue
import Vue from "vue";
// 引入App组件
import App from "./App"
// 引入store
import store from './store'

// 关闭生产提示
Vue.config.productionTip = false
// 创建vm
new Vue({
   
    render: h => h(App),
    store,
    // store: store
    beforeCreate() {
   
        // 安装全局事件总线
        Vue.prototype.$bus = this
    },
}).$mount("#app");

Vuex基础小案例

1. 组件读取Vuex中的数据：[this.]$store.state.内容
2. 组件修改Vuex中的数据：[this.]$store.despath("actions方法名", 数据)或[this.]$store.commit("mitations方法名", 数据)
   src/store/index.js

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

import Vue from 'vue'

// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex);

// 准备actions  用于响应组件中的动作
const actions = {
   
    /* incremnet(context, value) {
        // console.log("actions中的incremnet被调用了", context, value);
        context.commit("INCREMNET", value)
    },
    decremnet(context, value) {
        // console.log("actions中的decremnet被调用了", context, value);
        context.commit("DECREMNET", value)
    }, */
    incremnetOdd(context, value) {
   
        // console.log("actions中的incremnetOdd被调用了", context, value);
        if (context.state.sum % 2) {
   
            context.commit("INCREMNET", value)
        }
    },
    incremnetWait(context, value) {
   
        // console.log("actions中的incremnetWait被调用了", context, value);
        setTimeout(() => {
   
            context.commit("INCREMNET", value)
        }, 500)
    },
}
// 准备mutations    用于加工数据
const mutations = {
   
    INCREMNET(state, value) {
   
        // console.log("mutations中的INCREMNET被调用了", context, value);
        state.sum += value
    },
    DECREMNET(state, value) {
   
        // console.log("mutations中的DECREMNET被调用了", context, value);
        state.sum -= value
    }
}
// 准备state    用于存储数据
const state = {
   
    sum: 0,  // 当前的求和
}
// 创建store
/* const store = new Vuex.Store({
    actions,
    mutations,
    state,
})


// 导出store
export default store */
// 创建并暴露store
export default new Vuex.Store({
   
    actions,
    mutations,
    state
})

Count.vue

<template>
  <div>
    <h1>当前求和为：{
   {
   $store.state.sum}}</h1>
    <select v-model.number="num">
        <option value