vuex里mapState,mapGetters使用详解

最新推荐文章于 2023-01-05 14:55:43 发布

hello_world!

最新推荐文章于 2023-01-05 14:55:43 发布

阅读量442

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/djrm11/article/details/122093568

版权

前端专栏收录该内容

58 篇文章 47 订阅 ¥9.90 ¥99.00

订阅专栏

本文详细介绍了Vuex中的mapState和mapGetters的使用方法。从初始化项目、安装Vuex到创建store.js文件，逐步解释如何在组件中通过mapState获取state属性，以及如何通过mapGetters辅助方法结合getters获取和处理数据。同时，文章还探讨了actions、mutations在数据变更中的角色，以及如何利用mapActions触发actions改变数据。最后强调了深入理解这些概念的重要性。

摘要由CSDN通过智能技术生成

一、基本用法

1. 初始化并创建一个项目

vue init webpack-simple vuex-demo
cd vuex-demo
npm install

2. 安装 vuex

npm install vuex -S

3. 在 src 目录下创建 store.js 文件，并在 main.js 文件中导入并配置

store.js 中写入

import Vue from 'vue'
//引入 vuex 并 use
import Vuex from 'vuex'
Vue.use(Vuex)
main.js 文件

import Vue from 'vue'
import App from './App.vue'
import store from './assets/store' //导入 store 对象
 
new Vue({
 //配置 store 选项，指定为 store 对象，会自动将 store 对象注入到所有子组件中，在子组件中通过 this.$store 访问该 store 对象 
 store, 
 el: '#app',
 render: h => h(App)
})

4. 编辑 store.js 文件

了解本专栏