Vuex概述及核心概念
Posted 遥岑.
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex概述及核心概念相关的知识,希望对你有一定的参考价值。
目录
Vuex
概述
Vuex是实现组件全局状态(数据)管理的一种机制,可以实现组件之间数据的共享。
优点:
- vuex集中管理共享的数据,易于开发和后期维护
- 能够高效实现组件之间的数据共享,提高开发效率
- 存储在vuex中的数据都是响应式的,能够实时保持数据与页面的同步
基本使用
- 安装vuex依赖包
npm install vuex --save
- 导入vuex包
import Vuex from vuex
Vue.use(Vuex)
- 创建store对象
const store = new Vuex.Store(
// state中存放的就是全局共享的数据
state: count:0
)
- 将store对象挂载到vue实例中
new Vue(
el: '#app',
render: h => h(app),
router,
//将创建的共享数据对象,挂载到vue实例中
//所有的组件就可以直接从store中获取全局的数据了
store
)
核心概念
Vuex的主要核心概念:
State
State提供唯一的公共数据源,所有共享的数据要统一放到Store的State中进行存储。
const store = new Vuex.Store(
state: count: 0
)
组件访问State中数据的方式:
this.$store.state.全局数据名称
//从vuex中按需导入mapState函数
import mapState from 'vuex'
//将全局数据映射为当前组件的计算属性
computed:
...mapState(['count'])
Mutation
Mutation用于变更Store中的数据。
只能通过mutation变更store数据,不可以直接操作store中的数据;通过这种方式虽然操作稍微繁琐一些,但是可以集中监控所有数据的变化。
Mutation 不能执行异步操作。
//定义Mutation
const store = new Vuex.Store(
state:
count: 0
,
mutations:
add(state, step)
//变更状态 接收参数
state.count += step
)
// 触发mutation时携带参数
methods:
handle1()
this.$store.commit('add',3)
// 触发mutations的第一种方式
this.$store.commit()
// 第二种方式
// 按需导入 mapMutations 函数
import mapMutations from 'vuex'
//将指定的 mutations 函数,映射为当前组件的 methods 方法
methods:
...mapMutations(['add','addN'])
Action
Action用于处理异步任务。
如果通过异步操作变更数据,必须通过Action,在Action中通过触发Mutation的方式间接变更数据。
// 定义 action
actions:
addNAsync(context, step)
setTimeout(() =>
context.commit('addN', step)
,1000)
// 触发 action 并携带参数 第一种方式
// 调用 dispatch 函数
this.$store.dispatch('addNAsync', 5)
// 第二种触发 action 的方式
// 导入 mapActions 函数
import mapActions from 'vuex'
//将指定的 actions 函数,映射为当前组件的 methods 函数
methods:
...mapActions(['addAsync','addNAsync'])
Getter
Getter 用于对 Store 中的数据进行加工处理形成新的数据。
Getter 可以对Store中已有的数据加工处理后形成新的数据,类似Vue的计算属性;Store中数据发生变化,Getter的数据也会跟着变化。
// 使用getters的第一种方式
this.$store.getters.名称
// 使用getters的第二种方式
import mapGetters from 'vuex'
computed:
...mapGetters(['showNum'])
例子
App.vue
<template>
<div>
<my-add></my-add>
<my-sub></my-sub>
</div>
</template>
<script>
import add from "./components/add.vue"
import sub from "./components/sub.vue"
export default
data()
return
,
components:
'my-add': add,
'my-sub': sub
</script>
main.js
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue(
el: '#app',
store,
components: App ,
template: '<App/>'
)
store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store(
state:
count: 0
,
// 只有 mutations 中定义的函数,才有权力修改 state 中的数据
mutations:
// 不要在mutations函数中执行异步操作
add(state)
state.count++
,
addN(state,step)
state.count += step
,
sub(state)
state.count--
,
subN(state,step)
state.count -= step
,
actions:
// context相当于new出来的实例对象
addAsync(context)
setTimeout(()=>
// 在 action 中,不能直接修改 state 中的数据
// 必须通过 context.commit() 触发某个 mutation 才行
context.commit('add')
,1000)
,
addNAsync(context, step)
setTimeout(()=>
context.commit('addN',step)
,1000)
,
subAsync(context)
setTimeout(()=>
context.commit('sub')
,1000)
,
subNAsync(context,step)
setTimeout(()=>
context.commit('subN',step)
,1000)
,
getters:
showNum(state)
return '当前最新的数量是【'+ state.count +'】'
)
add.vue
<template>
<div>
<!-- template中this可以省略 -->
<!-- <h3>count: $store.state.count</h3> -->
<h3>$store.getters.showNum</h3>
<button @click="btnHandler1">+1</button>
<button @click="btnHandler2">+n</button>
<button @click="btnHandler3">+1 async</button>
<button @click="btnHandler4">+N async</button>
</div>
</template>
<script>
export default
data()
return
,
methods:
btnHandler1()
this.$store.commit('add')
,
btnHandler2()
// commit 调用某个 mutation 函数
this.$store.commit('addN',3)
,
btnHandler3()
// dispatch函数专门触发action
this.$store.dispatch('addAsync')
,
btnHandler4()
this.$store.dispatch('addNAsync', 5)
</script>
sub.vue
<template>
<div>
<!-- <h3>count: count</h3> -->
<h3>showNum</h3>
<button @click="btnHandler1">-1</button>
<button @click="btnHandler2">-n</button>
<button @click="subAsync">-1 async</button>
<button @click="subNAsync(5)">-n async</button>
</div>
</template>
<script>
import mapState, mapMutations, mapActions, mapGetters from 'vuex'
export default
data()
return
,
computed:
// 将全局数据映射为计算属性
...mapState(['count']),
...mapGetters(['showNum'])
,
methods:
...mapMutations(['sub','subN']),
...mapActions(['subAsync', 'subNAsync']),
btnHandler1()
this.sub()
,
btnHandler2()
this.subN(2)
,
</script>
效果:
以上是关于Vuex概述及核心概念的主要内容,如果未能解决你的问题,请参考以下文章