vuex入门

528 阅读2分钟

vuex是为Vue.js设计的的一种状态管理模式,可以理解为是一个共享的数据单元,通过vuex能够方便地实现数据的传递与更新。相较于以往的数据传递,vuex更简洁,更优雅

vuex的重要部分

  • state 状态
  • mutations 更改状态
  • getters 获取状态
  • actions 异步更改状态

这些是vuex的核心内容,下一部分对其详细介绍。

使用vuex

state

state中存放了我们的数据,如同仓库一般:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {

  },
  actions: {

  }
})

在其他组件中便可以使用数据:

<h1>{{this.$store.state.count}}</h1>

getters

getter和vue中的计算属性有异曲同工之妙,可以如同变量般直接调用:

在这个示例中,目标是得到成绩不及格的人数:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list:[
      {name:"wang5",score:40},
      {name:"li4",score:50},
      {name:"zhang3",score:60},
      {name:"zhao6",score:70},
  ]
  },
  getters:{
    fail(state){
      let a=0;
      state.list.forEach(item=>{
        if(item.score<60){
          a++
        }
      })
      return a;
    }
  }
})
<h1>{{this.$store.getters.fail}}</h1>

结果:

mutations

mutations是修改存放在仓库里的数据值的唯一推荐方法,

虽然使用其他方法似乎也能实现修改值,但是强烈反对使用。

在这个示例中,定义一个按钮,每点一次使state中的conter的值加一


<template>
  <div class="home">
    <button @click="f">点击加1</button>
    <h3>{{this.$store.state.conter}}</h3>
  </div>
</template>

<script>
export default {
  name: "home",
  methods: {
    f(){
      this.$store.commit("add")
    }
  }
};
</script>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    conter:1
  },
  mutations: {
    add(state){
      state.conter++
    }
  }
})

运行效果:

actions

当处理异步的数据变化时,使用actions

值得一提的是,actions提交后依然是mutations,所以这与上一部分中提到的的“mutations是修改存放在仓库里的数据值的唯一推荐方法”并不矛盾。

这个实例中,点击按钮3秒后conter值加1


<template>
  <div class="home">
    <button @click="f">点击加1</button>
    <h3>{{this.$store.state.conter}}</h3>
  </div>
</template>

<script>
export default {
  name: "home",
  methods: {
    f(){
      this.$store.dispatch("addAsyncNum")
    }
  }
};
</script>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    conter: 1
  },
  mutations: {
    add(state) {
      state.conter++
    }
  },
  actions: {
    addAsyncNum(context) {
      setTimeout(function () {
        context.commit("add")
      }, 3000)
    }
  }
})

mapXX

觉得上面的写法还是有点繁琐??不要着急,我们还有更优雅的用法,那就是mapStatemapMutationsmapGettersmapActions

看这一段代码:

template>
  <div class="home">
    {{conter}}
  </div>
</template>

<script>

import {mapState} from "vuex"

export default {
  name: "home",
  computed:{
    ...mapState(["conter"])
  }
};
</script>
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    conter: [1,2,3,4,5]
  }
})

运行结果:

在这个示例中,我们使用mapState成功输出了conter,

我们用这种简洁的方法规避了冗长的this.$store.state.count

其余的mapMutationsmapGettersmapActions用法也是如此。

需要注意的是,使用mapXX的方式,需要先导入,如: import {mapState} from "vuex"

使用mapXX时,有如下对应关系:

结束

本文乃学习过程之总结,难免有不足之处,希望有所帮助。