vuex状态管理入门

Vuex - vue的状态管理

一种集中式状态管理模式(多组件之间共享信息管理者、全局信息共享平台)

开发中常见的部分业务场景：

1.用户登陆状态管理 （用户登陆的状态信息共享）
2.用户个人信息管理（个人数据信息共享）
3.地理位置信息共享管理机制（位置信息将在业务中共享时）
4.商城开发的收藏、购物车、结算、地址信息等状态的保存。
等等…

vuex的安装

1.node 环境 通过npm进行安装（当然官方还有另一种安装方式Yarn）

npm install vuex --save
	或者
yarn add vuex

2.安装完成后我们会看到对应的版本号信息

3.在src中新建vuex的仓库文件夹store进行管理（单独存放易管理和开发），新建js文件进行导入 vuex

import Vue from 'vue'  //引入vue.js
import Vuex from 'vuex' //引入vuex
Vue.use(Vuex)  //挂载vuex

4.创建vuex实例对象(五大核心属性)

const store = new Vuex.Store({
        state: {   	//定义全局状态值(全局数据存储的地方 
         },
        getters: {  	 //相当于vue中的过滤器对state中的数据进行过滤并进行取值
         },
        mutations: {  	//与vue 中的methods用法相同 
        },
        actions:{  	//异步操作的部分（这里的话后面详细会降到）
        },
        module{		//模块的划分，详见后面模块的讲解
        }
    })

5.vuex的图解
*注意⚠️
1.推荐通过Devtools进行管理操作记录，进行实时操作记录
2.严格按照操作的流程进行操作，对状态数据state的操作全部由mutations完成
3.如果进行异步操作，通过actions进行完成（不要操作state数据）

6.封装vuex里面的属性
*将属性进行抽离封装（避免文件操作太多，数据量大，混乱）
*说明：将方法和其他操作全部抽离，index文件只用来保存数据，降低代码复杂度

对应的模块导出格式：（每个抽离的文件一定要导出才能进行对应的引入操作）

7.模块导入vuex进行使用
1.全局main.js导入vuex
2.全局注册vuex模块

8.使用属性解析以及用法

1.state：数据存储中心，状态管理核心数据

state: {    //定义全局状态值
        data: 2020,
        student: [
            { id: '13', age: 18, name: '乔丹' },
            { id: '18', age: 24, name: '科比' },
            { id: '155', age: 44, name: '詹姆斯' },
        ]
    }

使用$store的关键字进行获取vuex对象，再获取state的状态值：

<div>在Vuex中的值:{{$store.state.data}}</div>

2.getters :相当于vue中的过滤器对state中的数据进行过滤并进行取值

getters: {  	 
            powercounter(state) { //例如取data值的平方
                return state.data * state.data
            }
        }

使用$store的关键字进行获取vuex对象，调用getters对应的方法

<div>在Vuex中的值的平方:{{$store.getters.powercounter}}</div>

3.mutations: 与vue 中的methods用法相同(定义方法进行数据的操作)

mutations: {  	
 		install(state, num) {  //mutation的常量定义方法使用 [install]可以减少错误
                state.data += num
            }
    }

首先，我们需要修改state的数据，使用mutations内定义的方法（state,num）第一个参数就是原状态数据state 对象，num为传入参数，组件触发按钮以及调用方法如下：
触发按钮：

<button @click="adds(5)">+5</button>

组件内对应的事件：（通过commit调用mutations内找到对应的install方法,传入参数为num）

methods: {
    adds(num){
      this.$store.commit(install,num)
    } 
  }

4.actions:异步操作的使用，当业务需要通过网络请求之后修改状态数据时，特别需要注意的为：
⚠️不要通过actions内方法直接操作state内的数据信息，应该严格按照流程，调用methods内的方法进行数据的操作，保证每一步操作都有记录，能清楚的查找到数据的改变以及操作。
⚠️同样采用commit的方式进行调用mutations的方法进行数据操作

actions:{  	
		aupdata(context,num){
			setTimeout(()=>{   //异步操作的部分
					context.commit('install',num)
					},1000)
			}
        }

5.module:模块化处理，多个不同模块或者子模块的管理和划分

 *注意⚠️不同模块，子模块内置属性全部都相同，不同模块之间的结构相同*

  module{		//模块的划分
		moduleA:{   //模块A
					state: {   	
		         },
		        getters: {  	
		         },
		        mutations: {  	
		        },
		        actions:{  	
		        },
		        module{		
		       		 moduleA:{...} //子模块 内容属性完全相同
		        }
		},
		moduleB:{  //模块B
					state: {   	
		         },
		        getters: {  	
		         },
		        mutations: {  	
		        },
		        actions:{  	
		        },
		        module{		
		        
		        }
		},

    }

最后建议通过定义mutation的常量定义方法使用定义的方法 [install]，再前端组件使用时可以直接使用install的方式以方法的方式调用····
希望大家支持，如果有建议要告诉我哦～.～