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>