Vuex

2个月前 (11-12) 325次浏览 已收录 4个评论

导读

vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。


Vuex核心概念

state

它是在store目录里的index.js里提供公共数据

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

组件访问state中数据的第一种方式,在add.vue组件中

this.$store.state.全局数据名称

在add的自定义组件中可以访问到这个全局数据

<template>
  <div>
      <h3>最新count值:{{$store.state.count}}</h3>
      <button>+1</button>
  </div>
</template>

组件访问state中数据的第二种方式,在add.vue组件中

<template>
  <div>
      <h3>最新count值:{{count}}</h3>
      <button>+1</button>
  </div>
</template>

<script>
// 从vuex中按需导入mapState函数
import {mapState} from 'vuex'
export default {
// 通过刚才导入的mapState函数,
// 将当前组件需要的全局数据,映射为当前组件的computed计算属性
computed:{
    ...mapState(['count'])
}
}
</script>

<style>

</style>

Mutation

用于变更Store中的数据

  • 只能通过mutation变更Store数据,不可直接操作Store中的数据
  • 可以集中监控所有数据的变化

在store目录里的index.js里提供公共数据并定义变更的状态

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state,outValue){
      state.count+=outValue
    }
  },
  actions: {
  },
  modules: {
  }
})

触发mutations的第一种方式,commit的作用就是调用某个mutation函数。在add.vue组件中

<template>
  <div>
      <h3>最新count值:{{$store.state.count}}</h3>
      <button @click="addbtn">+n</button>
  </div>
</template>

<script>
export default {
data() {
    return {
        
    }
},
methods: {
    addbtn(){
        //commit就是触发某个mutation函数
        this.$store.commit('add',3)
    }
},
}
</script>

<style>

</style>

触发mutations的第二种方式,在add.vue组件中

<template>
  <div>
    <h3>最新count值:{{ $store.state.count }}</h3>
    <button @click="addbtn">+1</button>
  </div>
</template>

<script>
// 从vuex中按需导入mapMutations函数
import { mapMutations } from 'vuex'
export default {
  data() {
    return {}
  },
  methods: {
    // 通过刚才导入的mapMutations函数,
    // 将需要的mutations函数,映射为当前组件的methods方法
    ...mapMutations(['add','sub']),
    addbtn(){
        //传入步长值3
        this.add(3)
    }
  },
}
</script>

<style></style>
不要在mutations函数中执行异步操作,但是可以用Action处理异步任务

Action

通过Action来异步操作变更数据,但是它还是要通过触发Mutation的方式间接变更数据

在store里的index.js定义Action

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state){
      state.count++
    }
  },
  actions: {
    addyiBu(context){
      setTimeout(()=>{
        //上面已经提到,只有mutations才有权利修改state中的数据,即add
        context.commit('add')
      },1000)
    }
  },
  modules: {
  }
})

触发actions的第一种方式,在add.vue组件中

<template>
  <div>
    <h3>最新count值:{{ $store.state.count }}</h3>
    <button @click="addbtn">+1</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    addbtn(){
     //dispatch就是触发action
        this.$store.dispatch('addyiBu')
    }
  },
}
</script>

<style></style>

触发actions并传入参数

methods: {
  addbtn(){
      this.$store.dispatch('addyiBu',5)
  }
}
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state,outValue){
      state.count+=outValue
    }
  },
  actions: {
    addyiBu(context,outValue){
      setTimeout(()=>{
        context.commit('add',outValue)
      },1000)
    }
  },
  modules: {
  }
})

触发actions的第二种方式

<template>
  <div>
    <h3>最新count值:{{ $store.state.count }}</h3>
    <button @click="addbtn">+1</button>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
  data() {
    return {}
  },
  methods: {
    //   将需要的actions函数映射为当前组件的methods方法
    ...mapActions(['addyiBu']),
    addbtn(){
        this.addyiBu(5)
    }
  },
}
</script>

<style></style>

Getter

用于对Store中已有的数据进行加工处理形成新的数据,不会更改原来的数据。

  • 它可以对已有的数据加工处理后形成新的数据,类似于vue的计算属性
  • Store中数据发生变化,Getter的数据也会跟着变化

定义getters

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  mutations: {
    add(state,outValue){
      state.count+=outValue
    }
  },
  actions: {
    addyiBu(context,outValue){
      setTimeout(()=>{
        context.commit('add',outValue)
      },1000)
    }
  },
  getters:{
    showCount(state){
      return '最新数据:'+state.count
    }
  },
  modules: {
  }
})

使用getters的第一种方式

{{$store.getters.showCount}}

使用getters的第二种方式

<template>
  <div>
    <h3>最新count值:{{showCount }}</h3>
    <button @click="addbtn">+1</button>
  </div>
</template>

<script>
import {mapActions,mapGetters} from 'vuex'
export default {
  data() {
    return {}
  },
  methods: {
    //   将需要的actions函数映射为当前组件的methods方法
    ...mapActions(['addyiBu']),
    addbtn(){
        this.addyiBu(5)
    }
  },
  computed:{
    //   将需要用到的getter映射到当前的计算属性中
      ...mapGetters(['showCount'])
  }
}
</script>

<style></style>

渣渣龙, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:Vuex
喜欢 (47)

您必须 登录 才能发表评论!

(4)个小伙伴在吐槽
  1. 大哥牛逼,YYDS,6666
    百事2021-11-14 22:36
  2. 大哥牛逼,YYDS,6666!!
    百事2021-11-14 22:37
  3. 666
    百事2021-11-14 22:47
  4. 6667
    百事2021-11-14 22:47