几分钟搞懂Vuex(State,Mutations,Actions)

最新推荐文章于 2024-06-25 08:15:00 发布

小铃铛的打怪之路

最新推荐文章于 2024-06-25 08:15:00 发布

阅读量1.8k

点赞数

分类专栏： vue 文章标签： vue js

本文链接：https://blog.csdn.net/qq_45814762/article/details/107588877

版权

本文介绍了Vuex的基本概念，包括State作为应用的单一状态树，Getters用于计算衍生状态，Mutation作为更新状态的唯一途径，以及Actions用于处理异步操作。详细讲解了它们的使用场景和注意事项，如State中属性的初始化，Getters的计算属性功能，Mutation的同步性以及Actions的异步处理。

摘要由CSDN通过智能技术生成

文章目录

- State
- Getters
- Mutation
- Actions

这是Vuex官方给出的图片，看起来有点不好理解，上详解！！！！
开始介绍之前，我们需要将Vuex挂载到Vue实例上面，这样我们才能在Vue的所有组件中都可以使用这些数据，这里我们store文件夹下面的index.js存放我们的Vuex代码。
记得在入口文件main.js里面导入store对象

State

暂时可以将他看作是data中的属性，也就是我们当前的状态。
state里面的这些属性都会被加入到响应式系统里面，而响应式系统会监听属性的变化，一旦属性发生变化，会通知所有用到这个属性的界面并进行刷新。
但有一个前提，所有的属性都必须先初始化好，如果直接在mutations里面添加一个新的属性，界面是不会显示的。

//Vuex
const store = new Vuex.Store({
   
	sate:{
   
		count: 0
	}，
	mutations:{
   
		increament(state){
   
		state.count ++
		},
		decreament(state){
   
		state.count --
		}
	}
})


//App.vue
<template>
	<div id="app">
		<p>{
   {
   count}}</p>
		<button @click="increment">+1</button>
		<button @ click="decrement">-1</button>
	</div>
</template>
<script>
export default {
   
	name:' App', 
	components:{
   
	}, 
	computed:{
   
		count: function(){
   
		 //可以通过$this.$store.sate访问Vuex里面state的状态
			return this. $store.state.count 
	}
},
	methods:{
   
		increment: function ){
   
		//通过this.Store.commit(mutations中的方法)来修改状态
			this. Sstore. commit(' increment')
		}, 
		decrement: function ){
   
			this