vue 状态管理 二、状态管理的基本使用
系列导航
vue 状态管理 三、Mutations和Getters用法
状态管理的基本使用
一、 效果
定义一个变量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！
