vue的状态自管理应用——vuex

蔚落 2022-12-12 04:41 106阅读 0赞

# vuex——为了解决多组件共享状态的问题 #

## 状态自管理应用 ##

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]

## 下载: npm install vuex --save ##

## vuex的属性store拥有多个对象 ##

*  vuex管理的状态对象——**state**

//它应该是唯一的
    const state = { 
    	xxx: initValue
    }

*  包含多个直接更新state的方法(回调函数)的对象——**mutations**

//谁来触发: action中的commit('mutation名称')
     const mutations = { 
    	yyy (state, data) {  
    		// 更新state的某个属性
    	}
    }

*  包含多个事件回调函数的对象——**action**

//通过执行: commit()来触发mutation的调用, 间接更新state
     const actions = { 
    	zzz ({ commit, state}, data1) { 
    		commit('yyy', data2)
    	}
    }

*  包含多个计算属性(get)的对象——**getter**

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

## 使用vuex ##

**1.store.js**

import Vuex from 'vuex'
    	export default new Vuex.Store({ 
    		state,
    		mutations,
    		actions,
    		getters
    	})

**2.main.js**

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

## store对象之间的联系 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center 2]

## 在组件使用store对象 ##

### 方法一 ###

1.  所有用vuex管理的组件中都多了一个属性$store, 它就是一个store对象
2.  属性:

state: 注册的state对象

this.$store.state.nnn

getters: 注册的getters对象

this.$store.getters.mmm

1.  方法:

dispatch(actionName, data): 分发action

this.$store.dispatch("yyy");

### 方法二 ###

{
       {xxx}} {
       {mmm}} @click="zzz(data)"

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

当然啦最好是官网的资源la

1.  [github][]
2.  [在线文档][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/3e9237a08d0b43d588720b7c4a8434d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/33fa370c054a4884abb4d8950d3f80f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTUxMTIzNg_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/d42d94f7c11f439aa1b30b2fba9b95a2.png
[github]: https://github.com/vuejs/vuex
[Link 1]: https://vuex.vuejs.org/zh-cn/