vue 状态管理 二、状态管理的基本使用

系列导航

vue 状态管理 一、状态管理概念和基本结构

vue 状态管理 二、状态管理的基本使用

vue 状态管理 三、Mutations和Getters用法

vue 状态管理 四、Action用法

vue 状态管理 五、Module用法

状态管理的基本使用

一、 效果

定义一个变量counter，多个组件都使用它，在一个地方改变了个counter的值，其他组件中的值都跟着变更。

 

 

 

 

二、 目录结构

 

 

 

三、源码

index.js

import {createStore} from 'vuex'

export default createStore({
	state: {
		counter: 0,
	},
	mutations: {
		increament(state) {
			state.counter++
		},
		decrement(state) {
			state.counter--
		}
	},
	actions: {},
	modules: {}
})

 

App.vue

<template>
	<div >
		<h2>-------app.vue 中的数据----------</h2>
		<h2>{{$store.state.counter}}</h2>
		<button @click="addition">增加+</button>
		<button @click="subtraction">减少-</button>
		<h2>-------hello-world 组件中的数据----------</h2>
		<hello-world> </hello-world>
	</div>
</template>

<script>
	import { 	computed } from 'vue'
	import { 	useStore } from 'vuex'
    import HelloWorld from '@/components/HelloWorld.vue'
	export default {
		components: {
		    HelloWorld
		},
		setup() {
			const store = useStore()
 
			let addition=() => {
				store.commit('increament')
			}
			let subtraction=() => {
				store.commit('decrement')
			}
           
			return {
				addition,
				subtraction
			}
		}
	}
</script>

 

HelloWorld.vue

<template>
  <div  >
    <h2>{{$store.state.counter}}</h2>
 </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
     
  }
}
</script>

<style  > 
</style>

 

资源丰富的的网盘资源：网盘资源大全！ 推荐一个适合零基础学习SQL的网站：不用安装数据库，在线轻松学习SQL！