系列導航

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>