vue3.0 使用vuex,访问和修改全局变量global中对象bool的值,bool为布尔类型。
时间: 2024-09-23 22:07:57 浏览: 51
Vue中全局变量的定义和使用
5星 · 资源好评率100%
Vue3中使用Vuex作为状态管理工具,你可以将像`bool`这样的全局布尔变量存储在一个名为store.js的文件中,它会成为整个应用的所有组件共享的数据源。首先,你需要安装并导入Vuex:
```bash
npm install vuex
```
然后,在store.js里创建store:
```javascript
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
bool: false // 初始化布尔值为false
},
mutations: { // 变更全局变量的动作
setBool(state, value) {
state.bool = value
}
},
getters: { // 获取全局变量的方法
getBool(state) {
return state.bool
}
}
})
```
要在组件中访问和修改这个布尔值,需要注入store到组件的原型上,并通过`this.$store`来进行操作:
```javascript
// 组件A
export default {
setup() {
const boolValue = computed(() => this.$store.getters.bool);
const toggleBool = () => this.$store.commit('setBool', !this.$store.state.bool);
return {
boolValue,
toggleBool
};
}
}
```
现在,`boolValue`计算属性会在组件渲染时自动更新,`toggleBool`方法则可以用于改变`bool`的值。记得在每个需要修改全局状态的地方,都要通过commit提交mutation。
阅读全文