Vuex 概念与基本使用

Vuex 概念与基本使用

概念
集中式状态管理，管理多个组件的共享状态，应用于任意组件间的通信。

什么时候用vuex
多个组件共享状态

Vuex原理图

使用Vuex

npm i vuex
Vue.use(vuex)
生成store

commit 越过了actions, 直接与mutation对话， 适用于同步更改状态
dispatch 与actions对话，适用于异步更改状态或者在一定条件下更改状态
state 初始状态
actions: 修改状态的行为
mutations: 修改状态的动作

案例

创建store

import Vue from 'vue'
import Vuex from 'vuex'
// 注册Vuex插件
Vue.use(Vuex)

export default new Vuex.Store({
    // 修改数据的动作
    actions: {
        INCRE_ODD(context, payload) {
            context.state.count % 2 !== 0 && context.dispatch('INCRE_ASYNC', payload)
        },
        INCRE_ASYNC(context, payload) {
            setTimeout(() => {
                context.commit('incre', payload)
            }, 500);
        },
        DECRE_ASYNC(context, payload) {
            setTimeout(() => {
                context.commit('decre', payload)
            }, 500);
        }
    },
    // 操作数据的行为
    mutations: {
        incre(state, payload) {
            state.count += payload
        },
        decre(state, payload) {
            state.count -= payload
        }
    },
    // 初始化数据
    state: {
        count: 0
    }
})

main.js 加载store

Vue.use注册Vuex之后，通过this.store也可以拿到store对象，这里new Vue时传入则使用this.$store

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

// 关闭Vue的生产提示
Vue.config.productionTip = false

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

Counter.vue 消费store

<template>
  <div>
    <select v-model="unit">
      <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="increOdd">奇数加</button>
    <button @click="decreAsync">异步减</button>
    <h1>{{ $store.state.count }}</h1>
  </div>
</template>

<script>
export default {
  data: () => ({  unit: 1 }),
  methods: {
    _dispatch(action) {
      this.$store.dispatch(action, this.unit);
    },
    _commit(fnName) {
      this.$store.commit(fnName, this.unit);
    },
    increment() {
      this._commit("incre");
    },
    decrement() {
      this._commit("decre");
    },
    increOdd() {
      this._dispatch("INCRE_ODD");
    },
    decreAsync() {
      this._dispatch("DECRE_ASYNC");
    },
  },
};
</script>