Vue系列二十五：vuex-简介

浅浅的花香味﹌ 2022-01-30 11:41 360阅读 0赞

一、简介  
 github 站点：[https://github.com/vuejs/vuex][https_github.com_vuejs_vuex]  
 在线文档：[https://vuex.vuejs.org/zh-cn/][https_vuex.vuejs.org_zh-cn]  
 简单来说：对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)。  
二、状态自管理应用  
 state: 驱动应用的数据源。  
 view: 以声明方式将 state 映射到视图。  
 actions: 响应在 view 上的用户输入导致的状态变化(包含 n 个更新状态的方法)。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]  
三、多组件共享状态的问题  
 1、多个视图依赖于同一状态。  
 2、来自不同视图的行为需要变更同一状态。  
 3、以前的解决办法。  
  a. 将数据以及操作数据的行为都定义在父组件。  
  b. 将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递)。  
 4、vuex 就是用来解决这个问题的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70 1]  
四、vuex 核心概念和 API  
1、state  
（1）、 vuex 管理的状态对象。  
（2）、它应该是唯一的。

const state={ 
        	xxx:initValue 
        }

2、mutations  
（1）、包含多个直接更新 state 的方法(回调函数)的对象。  
（2）、谁来触发:action 中的 commit(‘mutation 名称’) 。  
（3）、只能包含同步的代码, 不能写异步代码。

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

3、actions  
（1）、包含多个事件回调函数的对象。  
（2）、通过执行：commit()来触发 mutation 的调用， 间接更新 state。  
（3）、谁来触发：组件中：`$store.dispatch('action 名称',data1) //'zzz'`  
（4）、可以包含异步代码(定时器,ajax)

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

4、getters  
（1）、包含多个计算属性(get)的对象。  
（2）、谁来读取：组件中：`$store.getters.xxx`

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

5、modules  
（1）、包含多个 module。  
（2）、一个 module 是一个 store 的配置对象。  
（3）、与一个组件(包含有共享数据)对应。  
6、向外暴露 store对象

export default new Vuex.Store({ 
        state, 
        mutations, 
        actions, 
        getters 
    })

7、组件中

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

8、映射 store

import store from'./store' 
    new Vue({ 
    	store 
    })

9、store对象  
（1）、所有用 vuex 管理的组件中都多了一个属性`$store`，它就是一个 store 对象。  
（2）、属性:  
  `state`: 注册的 state 对象  
  `getters`: 注册的 getters 对象  
（3）、方法:  
  `dispatch(actionName,data)`: 分发调用 action

[https_github.com_vuejs_vuex]: https://github.com/vuejs/vuex
[https_vuex.vuejs.org_zh-cn]: https://vuex.vuejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70]: /images/20220130/2b12264fbae44da4ab29c350ed19a39c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpemhpcWlhbmcxMjE3_size_16_color_FFFFFF_t_70 1]: /images/20220130/e2b8f88e7f0c4b86823bb02ac5a210ae.png