vue2如何修改vuex的属性值
时间: 2024-12-21 08:31:02 浏览: 9
在 Vue 2 中,要修改 Vuex 的状态(属性值),你需要通过 Vue 实例的 `$store` 对象来访问 store 中的 state 和 mutations。Vuex 提供了 `commit()` 方法来触发一个 mutation,mutation 是用于更新状态的专用函数。
以下是一个基本的例子:
```javascript
// 定义一个要在 Vuex 中修改的 state 属性
const state = {
count: 0
}
// 定义一个对应的 mutation 函数
const mutations = {
increment (state) {
state.count++
}
}
// 在 Vue 组件中
this.$store.commit('increment') // 调用 mutation,增加 count
// 或者直接在组件内使用 mapMutations 映射 mutation 到组件方法
methods: {
increaseCount () {
this.$store.commit('increment')
}
}
```
记得要在 Vue 组件的原型上注入 `$store`,例如在组件的 `created()`、`mounted()` 或者 `beforeUpdate()` 生命周期钩子里:
```javascript
export default {
created() {
this.$store.subscribe((mutation, state) => {
// 监听 store 的变化,如果需要
})
},
methods: {
increaseCount() {
this.$store.commit('increment')
}
},
computed: {
count() { // 如果你想在模板中读取该状态
return this.$store.state.count
}
}
}
```
阅读全文