在 Vue.js 2 中使用 Vuex，需要安装 Vuex，创建一个 Vuex 存储，并在组件中使用 Vuex 存储。映射状态助手 mapState 允许组件访问 Vuex 状态，而映射突变助手 mapMutations 允许组件使用 Vuex 突变。
如何在 Vue.js 2 中使用 Vuex
Vuex 是一个用于管理大型 Vue.js 应用程序状态的集中式状态管理库。它允许组件轻松访问和修改应用程序状态，从而提高应用程序的可维护性和可测试性。
安装 Vuex
首先，在你的项目中安装 Vuex：
立即学习“前端免费学习笔记（深入）”；
npm install vuex
创建 Vuex 存储
接下来，创建一个 Vuex 存储：
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
// 你的状态对象
},
getters: {
// 你的 getter 方法
},
mutations: {
// 你的 mutation 方法
},
actions: {
// 你的 action 方法
}
})
export default store在组件中使用 Vuex
一旦你创建了 Vuex 存储，你就可以在组件中使用它：
<template>
<div>
{{ count }}
<button @click="increment">+</button>
</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
computed: {
...mapState(['count'])
},
methods: {
...mapMutations(['increment'])
}
}
</script>映射状态助手
mapState 助手可以让你在组件中使用 Vuex 状态：
computed: {
...mapState(['count'])
}这将创建一个计算属性 count，该属性映射到 Vuex 存储中的 count 状态。
映射突变助手
mapMutations 助手可以让你在组件中使用 Vuex 突变：
methods: {
...mapMutations(['increment'])
}这将创建一个方法 increment，该方法映射到 Vuex 存储中的 increment 突变。
以上就是vue2怎么使用vuex的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告
收藏
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
304
