VUEX知识分享

VUEX知识分享

  很多朋友私信我要求出一篇关于Vuex的相关分享，最近一直忙没来得及整理，今天就给朋友们分享一篇关于vuex的相关知识

一、VUEX概述

1.vuex是什么

  Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

2.Vuex如何共享数据

  使用Vuex共享数据时，需要先将共享数据存储到Store组件的中State属性中。

3.Vuex的优点

①能够在Vuex中集中管理共享的数据，易于开发和后期维护
②能够高效地实现组件之间的数据共享，提高开发效率
③存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步

4.Vuex中适合存储什么数据

  只有组件之间共享的数据，才有必要存储到Vuex中。对于组件中的私有数据，依旧存储在组件自身的data中即可。

二、Vuex的创建

1.安装Vuex依赖包

npm install vuex --save

2.在Store组件中导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3.创建store对象，定义state属性

const store = new Vuex.store({
//state中存放的全局共享的数据
state:{}
}) 

4.将store对象挂载到vue实例中

new Vue({
el:'#app',
render:h=>h(app),
router,
//将创建的共享数据对象，挂载到vue实例中
//所有的组件，就可以直接从store中获取全局的数据
store

三、Vuex的使用

  vuex中的常用到的属性：
1.State、2.Mutation、3.Action、4.Getter
下面根据常用到的属性给大家一一介绍。

1.State的使用

  State提供唯一的公共数据源，所有共享的数据都要统一放到State中进行存储。

注意：State只是用来存储公共的数据，需要用到公共数据的组件可以随意使用，但是不允许更改State中的数据。

定义State共享数据count

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0
}
})

获取store中的共享数据

方式一、

<template>
<div class="One">
<h1>count的值：{{$store.state.count}</h1>
</div>
</template>

方式二、

<template>
<div class="Two">
<h2>count的值：{{count}}</h2>
</div>
</template>
<script>
import {mapState} from './store.js'
export default{
...
computed:{
...mapState(['count'])
}
...
}
</script>

2.Mutation的使用

  Mutation的作用是用来修改state中共享数据的，子组件只能通过mutations属性来修改state中共享数据的值

定义mutations属性

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0
},
mutations：{
add(state){
state.count++
}
}
})

触发mutations的使用

方式一、

<template>
<div class="One">
<h1>count的值：{{$store.state.count}</h1>
<button @click="handle"></button>
</div>
</template>
<script>
export default{
data(){
return{}
},
methods:{
handle(){
this.$store.commit('add')
}
}
}
</script>

方式二、

<template>
<div class="Two">
<h2>count的值：{{count}}</h2>
<button @click="add"></button>
</div>
</template>
<script>
import {mapMutations} from './store.js'
export default{
...
computed:{
...mapMutations(['add'])
}
...
}
</script>

带参数的使用方法

定义带参数的mutations属性

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0
},
mutations：{
add(state){
state.count++
},
sub(state,step){
state.count +=step
}
}
})

触发mutations带参数的使用

方式一、

<template>
<div class="One">
<h1>count的值：{{$store.state.count}</h1>
<button @click="handle"></button>
</div>
</template>
<script>
export default{
data(){
return{}
},
methods:{
handle(){
this.$store.commit('sub',3)
}
}
}
</script>

方式二、

<template>
<div class="Two">
<h2>count的值：{{count}}</h2>
<button @click="sub(3)"></button>
</div>
</template>
<script>
import {mapMutations} from './store.js'
export default{
...
computed:{
...mapMutations(['sub'])
}
...
}
</script>

3.Action的使用

Action用于处理异步任务
  如果通过异步操作变更数据，必须通过actions，属性，而不能使用mutations属性，但是在actions中还是要通过触发mutations的方式间接变更数据

定义actions属性

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0}
}),
mutations：{
add(state){
state.count++
},
sub(state,step){
state.count +=step
},
actions:{
addAsync(state){
//此处使用定时器来模拟异步操作
setTimeout(()=>{
state.commit('add')
},1000)
}
}
})

触发Action

方式一、

<template>
<div class="One">
<h1>count的值：{{$store.state.count}</h1>
<button @click="handle"></button>
</div>
</template>
<script>
export default{
data(){
return{}
},
methods:{
handle(){
this.$store.dispatch('addAsync')
}
}
}
</script>

方式二、

<template>
<div class="Two">
<h2>count的值：{{count}}</h2>
<button @click="addSync"></button>
</div>
</template>
<script>
import {mapActions} from './store.js'
export default{
...
computed:{
...mapMutations(['addSync'])
}
...
}
</script>

定义带参数的actions属性

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0}
}),
mutations：{
add(state){
state.count++
},
sub(state,step){
state.count +=step
},
actions:{
addAsync(state){
//此处使用定时器来模拟异步操作
setTimeout(()=>{
state.commit('sub')
},1000)
},
subAsync(state,step){
//此处使用定时器来模拟异步操作
setTimeout(()=>{
state.commit('sub',step)
},1000)
}
}
})

触发带参数的actions

方式一、

<template>
<div class="One">
<h1>count的值：{{$store.state.count}</h1>
<button @click="handle"></button>
</div>
</template>
<script>
export default{
data(){
return{}
},
methods:{
handle(){
this.$store.dispatch('subAsync',3)
}
}
}
</script>

方式二、

<template>
<div class="Two">
<h2>count的值：{{count}}</h2>
<button @click="addSync(3)"></button>
</div>
</template>
<script>
import {mapActions} from './store.js'
export default{
...
computed:{
...mapMutations(['subSync'])
}
...
}
</script>

4.Getter的使用

  Getter用于对store中的数据进行加工处理形成新的数据。
  ①Getter可以对Store中已有的数据加工处理之后形成新的数据，类似Vue的computed属性
  ②Store中数据发生变化，Getter的数据也会跟着变化

定义Getter

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
count:0}
,
mutations：{
add(state){
state.count++
},
sub(state,step){
state.count +=step
}
},
actions:{
addAsync(state){
//此处使用定时器来模拟异步操作
setTimeout(()=>{
state.commit('sub')
},1000)
},
subAsync(state,step){
//此处使用定时器来模拟异步操作
setTimeout(()=>{
state.commit('sub',step)
},1000)
}
},
getters:{
showNum:state=>{
return '当前最新的数量是['+state.count+']
}
}
})

触发Getter

方式一、

<template>
<div class="One">
<h1>count的值：{{$store.state.count}</h1>
<button @click="handle"></button>
<span>{{$store.getters.showNum}}</span>
</div>
</template>
<script>
export default{
data(){
return{}
},
methods:{
handle(){
this.$store.dispatch('subAsync',3)
}
}
}
</script>

方式二、

<template>
<div class="Two">
<h2>count的值：{{count}}</h2>
<button @click="addSync(3)"></button>
<span>{{showNum}}</span>
</div>
</template>
<script>
import {mapActions} from './store.js'
export default{
...
computed:{
...mapGetters(['showNum'])
}
...
}
</script>