vuex状态管理

vuex是什么

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

2、Github地址： https://github.com/vuejs/vuex

什么时候使用vuex

1、多个组件依赖于同一状态

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

Vuex 工作原理图

 

搭建vuex环境

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

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

    //引入Vue核心库
    import Vue from "vue"
    //引入Vuex
    import Vuex from "vuex"
    //应用Vuex插件
    Vue.use(vuex)

    //准备actions——用于响应组件中的对象
    const actions ={}
    //准备mutations——用于操作数据（state）
    const mutations = {}
    //准备state——用于存储数据
    const state = {}

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

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

    //引入store
    import store from "./store"
    ......

    //创建vm
    new Vue({
        el:"app",
        render:h=>h(App),
        store,
    })

基本使用

1、初始化数据、配置actions、配置mutations，操作文件store.js

    //引入Vue核心库
    import Vue from 'vue'
    //引入Vuex
    import Vuex from 'vuex'
    //引入Vuex
    Vue.use(Vuex)

    const actions = {
      //响应组件中加的动作
      jia(context,value){
        context.conmmit('JIA',value)
      },
    }

    const mutations = {
      //执行加
      JIA(state,value){
        state.sum += value
      }
    }

    //初始化数据
    const state = {
      sum:0
    }

    //创建并暴露store
    export dafault new Vuex.store({
      actions,
      mutations,
      state,
    })

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

3、组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据）或$store.commit(mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit
getters的使用

1、概念：当state中的数据需要经过加工后再使用时，可以使用getters加工

2、再store.js中追加getters配置

    ......
    const getters = {
      bigSum(state){
        return state.sum = 10
      }
    }

    //创建并暴露store
    export dafault new Vuex.Store({
      ......
      getters
    })

3、组件中读取数据：$store.getters.bigSum