Vue3语法-Vuex

Vuex

每一个Vuex应用核心就是store（仓库）

• store本质上是一个容器，它包含者你的应用中大部分的状态（state）；

Vuex和单纯的全局对象有上面区别呢？

• Vuex的状态存储是响应式
• 你不能直接改变store中状态（改变store中状态的唯一途径就是提交（commit）mutation）

1、安装Vuex

npm install vuex

2、创建store，存储状态

import { createStore } from 'vuex'

const store = createStore({
	state: () => ({
		counter:0
	})
})

export default store

3、main.js引入

import store from './store'

createApp(App).use(store).mount('#app')

4、使用store

<template>
	<div class='app'>
		<h2>App当前计数：{{$store.state.counter}}</h2>
	</div>
</template>

5、使用store引用useStore

import { useStore } from ‘vuex’

//通过useStore可以获取store里面的值
const store = useStore()

function increment(){
	//提交事件名称，让mutations去执行改变状态
	store.commit('increment')
}

6、只能在store通过mutations修改state

import { createStore } from ‘vuex’

const store = createStore({
	state = () => ({
		counter:100
	}),
	mutations:{
		increment(state){
			state.counter++
		}
	}
})