vuex 组合式用commit调用改变方法.
时间: 2023-08-10 22:43:55 浏览: 35
在使用Vuex组合式API时,我们可以通过`useStore`函数获取到store实例,并通过`commit`方法调用mutation来改变状态。
下面是一个示例代码:
```javascript
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
setup() {
const store = useStore()
const count = computed(() => store.state.count)
const increment = () => {
store.commit('increment')
}
return {
count,
increment
}
}
}
```
在上面的代码中,我们首先通过`useStore`函数获取到store实例,然后通过`computed`函数创建了一个计算属性`count`,它会根据store中的`count`状态自动更新。接着,我们通过`increment`函数来触发`increment` mutation,从而改变store中的状态。
在Vue组件中,我们可以直接使用`count`和`increment`这两个函数。例如:
```html
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
import { useStore } from 'vuex'
import { computed } from 'vue'
export default {
setup() {
const store = useStore()
const count = computed(() => store.state.count)
const increment = () => {
store.commit('increment')
}
return {
count,
increment
}
}
}
</script>
```
在上面的代码中,我们在模板中直接使用了`count`计算属性和`increment`函数来显示和改变状态。