专栏首页pangguomingvuex里mapState,mapGetters使用详解

vuex里mapState,mapGetters使用详解

一、基本用法

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 文件

在应用 vuex 之前,我们还是需要看懂这个流程图,其实很简单。

vuex

① Vue Components 是我们的 vue 组件,组件会触发(dispatch)一些事件或动作,也就是图中的 Actions; ② 我们在组件中发出的动作,肯定是想获取或者改变数据的,但是在 vuex 中,数据是集中管理的,我们不能直接去更改数据,所以会把这个动作提交(Commit)到 Mutations 中; ③ 然后 Mutations 就去改变(Mutate)State 中的数据; ④ 当 State 中的数据被改变之后,就会重新渲染(Render)到 Vue Components 中去,组件展示更新后的数据,完成一个流程。

Vuex 的核心是 Store(仓库),相当于是一个容器,一个 Store 实例中包含以下属性的方法:

state 定义属性(状态 、数据)

store.js 中写入

// 定义属性(数据)
var state = {
 count:6
}
// 创建 store 对象
const store = new Vuex.Store({
 state
})
 
// 导出 store 对象
export default store;

方式1、 在 app.vue 中就能通过 this.$store 访问该 store 对象 ,获取该 count 。

<template>
 <div id="app">
 //把 count 方法直接写入,可自己执行
 <h1>{{count}}</h1>
 </div>
</template>
 
<script>
export default {
 name: 'app',
 computed:{
 count(){
  //返回获取到的数据
  return this.$store.state.count
 }
 }
}
</script>

方式2、vuex 提供的 mapGetters 和 mapActions 来访问

mapGetters 用来获取属性(数据)

① 在 app.vue 中引入 mapGetters

import {mapGetters} from 'vuex'

② 在 app.vue 文件的计算属性中调用 mapGetters 辅助方法,并传入一个数组,在数组中指定要获取的属性 count

<script>
import {mapGetters,mapActions} from 'vuex'
export default {
 name: 'app',
 computed:mapGetters([
 //此处的 count 与以下 store.js 文件中 getters 内的 count 相对应
 'count'
 ])
}
</script>

③ 在 store.js 中定义 getters 方法并导出

getters 用来获取属性

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
// 定义属性(数据)
var state = {
 count:6
}
// 定义 getters
var getters={
 //需要传个形参,用来获取 state 属性
 count(state){
  return state.count
 }
}
// 创建 store 对象
const store = new Vuex.Store({
 state,
 getters
})
 
// 导出 store 对象
export default store;

这样页面上就会显示传过来的数据了!接下来我们来通过动作改变获取到的数据

④在 store.js 中定义 actions 和 mutations 方法并导出

actions 定义方法(动作),可以使异步的发送请求。

commit 提交变化,修改数据的唯一方式就是显示的提交 mutations

mutations 定义变化,处理状态(数据)的改变

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 
// 定义属性(数据)
var state = {
 count:6
}
 
// 定义 getters
var getters={
 count(state){
  return state.count
 }
}
 
// 定义 actions ,要执行的动作,如流程的判断、异步请求
const actions ={
 // ({commit,state}) 这种写法是 es6 中的对象解构
 increment({commit,state}){
  //提交一个名为 increment 的变化,名字可自定义,可以认为是类型名,与下方 mutations 中的 increment 对应
  //commit 提交变化,修改数据的唯一方式就是显式的提交 mutations
  commit('increment') 
 }
}
 
// 定义 mutations ,处理状态(数据) 的改变
const mutations ={
 //与上方 commit 中的 ‘increment' 相对应
 increment(state){
  state.count ++;
 }
}
// 创建 store 对象
const store = new Vuex.Store({
 state,
 getters,
 actions,
 mutations
})
 
// 导出 store 对象
export default store;

⑤ 在 app.vue 中引入 mapActions ,并调用

mapActions 用来获取方法(动作)

import {mapGetters,mapActions} from 'vuex'

调用 mapActions 辅助方法,并传入一个数组,在数组中指定要获取的方法 increment

<template>
 <div id="app">
 //这个 increment 方法与下面 methods 中的 increment 相对应
 <button @click="increment">增加</button>
 <button>减少</button>
 <h1>{{count}}</h1>
 </div>
</template>
 
<script>
import {mapGetters,mapActions} from 'vuex'
export default {
 name: 'app',
 computed:mapGetters([
 'count'
 ]),
 methods:mapActions([
 //该 increment 来自 store.js 中导出的 actions 和 mutations 中的 increment 
 'increment',
 ])
}
</script>

这样就能通过 button 来改变获取到的 count 了。

看起来确实是挺绕的,需要在理解了原理的情况下,再细细琢磨,加深理解。

/*getter是state的get方法,没有get页面就获取不到数据

获取页面:
import {mapGetters,mapActions} from 'vuex'
 <h1>{{count}}</h1>
computed:mapGetters([
 'count'
 ]),

store.js:

var state = {
 count:6
},
var getters={
 count(state){
  return state.count
 }
}

改变数据页面:
<button @click="increment">增加</button>
methods:mapActions([
 //该 increment 来自 store.js 中导出的 actions 和 mutations 中的 increment 
 'increment',
 ])

先发给action:
const actions ={
 // ({commit,state}) 这种写法是 es6 中的对象解构
 increment({commit,state}){
  //提交一个名为 increment 的变化,名字可自定义,可以认为是类型名,与下方 mutations 中的 increment 对应
  //commit 提交变化,修改数据的唯一方式就是显式的提交 mutations
  commit('increment') 
 }
}
再发给mutations:
const mutations ={
 //与上方 commit 中的 ‘increment' 相对应
 increment(state){
  state.count ++;
 }
}
*/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【一起来烧脑】读懂JQuery知识体系

    在现在就业的过程中,会运用JQuery是你的加分项,那么什么是JQuery,嗯,jquery是JavaScript的函数库,是一种轻量级的JavaScript库...

    达达前端
  • 这次又坑多少人? 深度解析 Dash 钱包"关键"漏洞!

    4月13日,Electrum 钱包遭受黑客攻击,黑客利用其钱包漏洞,窃取用户密钥,导致资金被盗。

    区块链大本营
  • 深/浅拷贝

    在MyBaby类中有一个私有变量list,类似为List,然后咱们使用setValue对其进行设值,使用getValue进行取值。接下来咱们来看看他是如何拷贝的...

    用户4143945
  • 我敢打赌绝大多数程序员没有这么深入研究过 System.out.println()!

    System.out.println 是一个 Java 语句,一般情况下是将传递的参数,打印到控制台。

    良月柒
  • ionic4底部Tab居中圆形凸出按钮

    IT晴天
  • Vue状态管理vuex

    在项目的src目录下新建一个目录store,在该目录下新建一个index.js文件,我们用来创建vuex实例,然后在该文件中引入vue和vuex,创建Vuex....

    羊羽shine
  • 技术成长是自学还是听课呢

    技术成长是需要自学,还是听课呢?我想很多成长中的软件技术人员都会有这样的困惑。软件技术变化太快,我们家族多数是在电厂工作的,我的哥哥姐姐学习的电厂的知识,基本上...

    用户5829239
  • Spring@Enable模块装配

    首先要说一下版本相关,Spring Framework3.1开始引入了@Enable注解。

    用户4143945
  • 讲真,别再使用JWT了!

    根据维基百科中定义,JSON WEB Token(JWT)是一种基于JSON的、用于在网络上声明某种主张的令牌(token)。

    物流IT圈
  • 【快学springboot】10.使用@Async注解创建多线程,自定义线程池

    使用@Async注解创建多线程非常的方便,还可以通过配置,实现线程池。比直接使用线程池简单太多。而且在使用上跟普通方法没什么区别,加上个@Async注解即可实现...

    Happyjava

扫码关注云+社区

领取腾讯云代金券