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++
}
}
})