说一下vuex的使用示例吧
时间: 2023-03-28 18:03:02 浏览: 111
在react中使用vuex的示例代码
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以集中管理应用程序中的所有组件的状态,并提供了一些工具来保证状态的一致性。下面是一个简单的 Vuex 使用示例:
1. 安装 Vuex:
npm install vuex --save
2. 在 main.js 中引入 Vuex:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
3. 创建一个 store:
const store = new Vuex.Store({
state: {
count:
},
mutations: {
increment (state) {
state.count++
}
}
})
4. 在组件中使用 store:
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="increment">Increment</button>
</div>
</template>
<script>
export default {
computed: {
count () {
return this.$store.state.count
}
},
methods: {
increment () {
this.$store.commit('increment')
}
}
}
</script>
以上就是一个简单的 Vuex 使用示例。在这个示例中,我们创建了一个 store,其中包含一个状态 count 和一个 mutation increment。在组件中,我们使用了 computed 属性来获取状态 count,并使用 methods 属性来触发 mutation increment。
阅读全文