Vuex状态管理精要-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43379230/article/details/104074940

vuex 理解

vuex是什么

github站点
在线文档
简单的说 vuex 就是对多个组件共享的状态进行集中的管理（读/写）

状态资管理应用

state:驱动应用的数据源
view：以声明方式将state 映射到视图
actions: 响应view 上由用户的输入导致的状态变化（包含n个更新状态的方法）

多组件共享状态的问题

多个视图依赖同一状态
来自不同视图的行为需要变更同一状态
以前的解决办法
- 将数据以及操作数据的行为都定义在父组件
- 将数据以及操作数据的行为传递给需要的各个子组件（有可能需要多级传递）
vue就是用来解决这个问题的

vuex 核心概念和API

vuex 状态管理流程图

state

vuex 管理的状态对象
state 应该是唯一的

const state={
    xxx: initValue,
}

mutations

是一个对象，包含多个直接更新state的方法（回调函数）
谁来触发：通过 action 中的 commit('mutation名称')

只能包含同步的代码，不能写异步代码：

const mutations ={
    yyy(state,{data1}){
        // 更新state的某个属性
       }
    }

actions

一个对象，包含多个事件回调函数
作用：通过执行commit() 来触发 mutation 的调用，间接更新 state
谁来触发：组件中：$store.dispatch('action 名称',data1)

可以包含异步代码（定时器，ajax）

const actions ={
    zzz({commit,state},data1){
    commit('yyy',{data1});
    }
}

getters

一个对象，包含多个计算属性（get)

谁来读取：组件中：$store.getters.xxx

const getters={
    mmm(state){
        return ...  
    }
}

modules

包含多个 module
一个module 是一个 store 的配置对象
与一个组件（包含有共享数据）对应

store对象

所有应用 vuex 管理的组件中都多了一个属性 $store ,它就是一个 store 对象
属性：
- state：注册的state对象
- getters: 注册的getters对象
方法：
dispatch(actionName,data):分发调用 action

创建并向外暴露 store 对象‘

//===== vuex 状态管理模块 =====
import Vue from "vue";
import Vuex from "vuex";

//----- 使用Vuex插件 -----
Vue.use(Vuex);

const state = {};
const actions = {};
const mutations = {};

const getters = {};

// ----- 创建并导出store -----
const store = new Vuex.Store({
    state,
    actions,
    mutations,
    getters,
});

export default store;

组件中

import {mapState, mapGetters, mapActions} from 'vuex'
export default {
computed: {
...mapState(['xxx']),
...mapGetters(['mmm']),
}
methods: mapActions(['zzz'])
}
{{xxx}} {{mmm}} @click="zzz(data)"

映射 store

import Vue from "vue";
import App from "@/App";
import store from "@/store";

new Vue({
    el: '#app',
    render(createElement) {
        return createElement(App);
    },
    store,
});