【Vue】状态管理模式Vuex

Moon里2024-09-08 15:38

数据共享

流程

Vuex是一个Vue的状态管理工具，状态就是数据（某个状态在很多个组件来使用 ，多个组件共同维护一份数据）

搭建

1）Vuex我们在脚手架搭建项目的时候直接搭建好了，所有可以直接用（如果搭建的时候没有选择Vuex，则需要以下步骤）

javascript 复制代码 
1.安装：npm install vuex --save

2.在src下创建store文件夹创建index.js文件，内容如下：
	<script>
		import Vue from 'vue'
		import Vuex from 'vuex' // vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
	
		Vue.use(Vuex)
	
		export default new Vuex.Store({
			state: {
				//存储数据
			},
			getters: {
				//获取state中的数据时进行一些计算或过滤处理
			},
			mutations: {
				//同步更改状态
			},
			actions: {
				//处理异步逻辑
			},
			modules: {
				//模块化状态管理
			}
		})
	</script>

3.在main.js中配置：
	 引入：import store from './store'
	 
	 挂载：
			<script>
				new Vue({
					router,
					store,  //创建的共享数据挂载到vue实例，所有组件能够直接从store中获取到全局的数据
					render: h => h(App)
				}).$mount('#app')
			</script>

2）在store/index.js中写入需要共享的数据

javascript 复制代码 
state: {
	//数据
	count:9,
}

3）在组件中使用数据

html 复制代码 
<h2>{{$store.state.count}}</h2>

变更状态

通过页面上的事件触发（1. @click 触发组件中的事件，2. 组件中的事件触发actions，3. actions发起axios请求获取数据，4. 触发mutations中的函数存储state数据，5. 页面上绑定state中的数据）。当组件created页面初始数据的时候，则获取服务器的数据保存到Vuex中，再获取出来到页面中使用

MyVuex.vue

html 复制代码 
<h2>计数：{{$store.state.count}}</h2>
<button @click="increment"> + </button> 
<button @click="incrementAsync(10)"> 异步+ </button>

<h2>处理后的计数：{{myCount}}</h2>

<ul v-for="item in $store.state.productData">
	<li>{{item.name}}</li>
</ul>
<button @click="getData">在本组件向服务器发起请求获取数据</button>
<button @click="getData2">在actions中向服务器发起请求获取数据</button>

<script>
	// import {mapActions} from 'vuex'
	export default {
		name: "MyVuex",
		computed:{
			myCount: function(){
				return this.$store.getters.getCount;
			}
		},
		methods:{
			increment(){
				this.$store.dispatch("increment",3); //在组件中使用 this.$store.dispatch('方法名',可带参) 来分发到 action
			},
			incrementAsync(n){
				this.$store.dispatch("incrementAsync",n)
			},
			getData2(){
				this.$store.dispatch("getData2")
			}
			//等同于：引入mapActions之后的新写法，它自动就去找了，参数都省的接了，自动映射为 this.$store.dispatch('xxx')
			//...mapActions([ 
			//	'increment',
			//	'incrementAsync'
			//	'getData2'
			//]),
		
			getData() {
				//在这里发起axios请求获取数据（该怎么发怎么发）
				this.$axios({
					method:"get",
					url:"/api/product.do"
				}).then(resp=>{
					//可以拿到服务器返回的数据，并将数据存储到state中
					this.$store.dispatch("saveData",resp.data)
				})
			}
		}
	}
</script>

store/index.js

javascript 复制代码 
import Vue from 'vue'
import Vuex from 'vuex'
import axios from "axios" //因为拿不到所有引进来
Vue.use(Vuex)

export default new Vuex.Store({
    state: { //数据
        count:9, 
        productData:[]
    },
    
    getters: { //getter用于对store中的数据进行加工处理，不会修改store中的数据，只是包装
    	getCount(state){
			return state.count + '月亮'
		}
    },
    
    mutations: {
        increment(state,n){ //依赖注入state
            state.count+=n; //更改state中的数据
        },
        saveData(state,data){
            console.log(data)
            state.productData=data
        }
    },
    
    actions: {
        increment(context,n){ //依赖注入context（一个与store实例具有相同方法和属性的context对象）
            context.commit("increment",n); //使用context.commit("方法名",可带参) 来提交到 mutation
        },
        incrementAsync(ctx,n){ //实现异步调用
            setTimeout(()=>{
                ctx.commit("increment",n)
            },1000)
        },
        saveData(ctx,data){
            ctx.commit("saveData",data)
        },
        async getData2(ctx){
            await axios({ // this.$axios 这里的this指向Vuex对象，而axios绑在全局Vue对象上，这里拿不到所有在这里引入axios
                method:"get",
                url:"/api/product.do"
            }).then(resp=>{
                console.log(resp.data)
                ctx.commit("saveData",resp.data)
            })
        }
    },
    
    modules: { //模块
    
    }
})

辅助函数

mapActions 、mapMutations（将它们全局的函数映射到本组件中），mapState（将全局数据映射为当前组件的计算属性），mapGetters（仅仅是将store中的getter映射到局部计算属性）

javascript 复制代码 
import { mapActions,mapMutations,mapState,mapGetters } from 'vuex'

export default {
	methods: {
		...mapActions([
			'increment', //将 this.方法名() 映射为 this.$store.dispatch('方法名')
      		'incrementB' //将 this.incrementBy(参数) 映射为 this.$store.dispatch('incrementBy',参数)
			// ...
    	]),
    	...mapActions({
			add: 'increment' //将 this.add() 映射为 this.$store.dispatch('increment')
			// ...
    	}),
    	...mapMutations([ //写法与mapActions同理，将dispatch方法换成commit方法
    		// ...
    	]),
    	...mapMutations({ 
    		// ...
    	}),
    	// ... 
	},
	
	computed: {
		...mapState([
  			'count' //当映射的计算属性的名称与state的子节点名称相同时，映射 this.count为 this.$store.state.count
			// ...
		]),
		...mapState({
			done:'doneCount' //将 this.done 映射为 this.$store.state.doneCount
			// ...
		}),
		...mapGetters([ //写法与mapState同理，映射为 this.$store.getters.方法名（store中的数据发生变化，getter中的数据也发生变化，存在一个响应关系）
			// ...
		]),
		...mapGetters({ 
			// ...
		}),
		// ...
	}
}

分割模块

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象中。当应用变得非常复杂时，store对象就有可能变得相当臃肿难以维护，由此有了Vuex的模块化

目录结构：

html 复制代码 
src/
│
├── store/
│   ├── index.js          # 主Store入口文件，引入并组合所有模块
│   ├── modules/
│   │   ├── xxxxx.js      # xxxxx模块
│   │   ├── xxxxx.js      # xxxxx模块
│   │   └── ...           # 其它模块
│
└── main.js               # 应用主入口，引入并使用Vuex Store

模块化： 使用模块化可以将Store分割为更小、更易管理的部分，每个模块对应应用的一个功能域
命名空间： 在模块化时，启用命名空间可以避免不同模块之间Getters、Actions、Mutations的命名冲突

定义两个模块：modules/carte.js 和 modules/product.js

javascript 复制代码 
const state={
};
const getters={
};
const mutations={
};
const actions= {
}
export default {  //模块 carte
	namespaced: true, // 启用命名空间（默认挂载到全局，开启后挂载到子模块，若不开启相当于没做模块化）
	state,
	getters,
	mutations,
	actions
}
javascript 复制代码 
const state={
};
const getters={
};
const mutations={
};
const actions= {
}
export default {  //模块 product
	namespaced: true, // 启用命名空间（默认挂载到全局，开启后挂载到子模块，若不开启相当于没做模块化）
	state,
	getters,
	mutations,
	actions
}

引入store的子状态模块，并注册到：store/index.js

javascript 复制代码 
import Vue from 'vue'
import Vuex from 'vuex'

//引入store的子状态模块
import carte from "@/store/modules/carte";
import myVuex from "@/store/modules/product";

Vue.use(Vuex)

export default new Vuex.Store({
  modules: { //在modules中配置注册子状态文件
    carte,
    product
  }
})

获取模块中的方法和数据

1) 直接访问
store.state.模块名.需要使用的状态名 store.getters['模块名/方法名'] (额外参数)
store.commit('模块名/方法名', 额外参数) store.dispatch('模块名/方法名', 额外参数)
注意：默认模块中的内容会被挂载到全局，需要开启命名空间，才会挂载到子模块。

html 复制代码 
<template>
	<div>
		<!-- $store.state.模块名.需要使用的状态名 -->
		<h2>{{$store.state.carte.userInfo.username }}</h2>
		
		<!-- $store.getters['模块名/方法名'] -->
		<h2>{{$store.getters['carte/filterList']}}</h2>
		<h2>{{filterList2}}</h2>
		
		<button @click="changeAge"> 修改年龄 </button> 
		<button @click="changeAge2"> 修改年龄2 </button>
	</div>
</template>

<script>
	export default {
		name: "Carte",
		computed:{
			filterList2: function () {
				return this.$store.getters['carte/filterList2'];
			}
		},
		
		methods:{
			changeAge() {
				// $store.commit('模块名/方法名',额外参数) 
				this.$store.commit('carte/updateAge',20)
			},
			changeAge2() {
				// $store.dispatch('模块名/方法名',额外参数) 
				this.$store.dispatch('carte/updateAge2',25)
			},
		}
	}
</script>

2) 通过 mapXxxx 映射
默认根级别的映射：mapXxxx(['xxx'])
子模块的映射：mapXxxx('模块名', ['xxx']) ， 需要开启命名空间 namespaced:true

html 复制代码 
<template>
	<div>
		<h2>{{ userInfo.username }}</h2>
		<h2>{{ filterList }}</h2>
		<button @click="updateAge(20)"> 修改年龄 </button> 
		<button @click="updateAge2(25)"> 修改年龄2 </button>
	</div>
</template>
 
<script>
	import { mapState , mapGetters , mapActions , mapMutations } from 'vuex'
	
	export default {
		name: "Carte",
		computed:{
			...mapState('carte', ['xxx','userInfo'])
			
			...mapGetters('carte', ['xxxxxx','filterList ','xxx'])
		}
		
		methods:{
			...mapMutations('carte', ['updateAge']),
			...mapMutations('product', ['xxxx','xxx'])
			
			...mapActions('carte', ['xxx','updateAge2','xxxxxx'])
		}
	}
</script>

// 若需要映射不同模块中的state、getters、actions、mutations内容，就分模块映射
相关推荐
Json_181790144803 分钟前
电商拍立淘按图搜索API接口系列，文档说明参考
前端·数据库
风尚云网26 分钟前
风尚云网前端学习：一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子020429 分钟前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing31 分钟前
React核心功能详解（一）
前端·react.js·前端框架
捂月34 分钟前
Spring Boot 深度解析：快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆41 分钟前
实用功能，觊觎（Edge）浏览器的内置截（长）图功能
前端·edge
Smartdaili China42 分钟前
如何在 Microsoft Edge 中设置代理： 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q43 分钟前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海44 分钟前
Chrome离线安装包下载
前端·chrome
m51271 小时前
LinuxC语言
java·服务器·前端
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02PyTorch机器学习实现液态神经网络03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总04玄机平台应急响应—webshell查杀05Coze扣子平台完整体验和实践（附国内和国际版对比）06Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO07【目标跟踪】相机运动补偿08Unity中PICO实现 隔空取物 和 接触抓取物体09RAG 实践- Ollama+RagFlow 部署本地知识库10ICLR24大模型提示(1/11) | BadChain：大型语言模型的后门思维链提示