vuex基本使用和辅助函数-(mapState,mapMutations,mapActions,mapGetters)的使用

一 vuex基础-state

state是放置所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在state对象中

定义state

//初始化vuex对象
const store = new Vuex.Store({
    state:{
       //管理数据
      count: 0
    }
})

如何在组件中获取count？

1.  原始形式-插值表达式

组件中可以使用this.$store获取到vuex中的store对象实例，可通过state属性获取count，如下

<div>state的数据：{{ $store.state.count }}</div>

2.  计算属性-将state属性定义在计算属性中

// 把state 中数据，定义在组件内的计算属性中
computed:{
 count() {
    return this.$store.state.count
 }
}

<div>state 的数据 ： {{ count }}</div>

3.  辅助函数-mapState

mapState 是辅助函数，帮助我们把store中的数据映射到组件的计算属性中，它属于一种方便用法

• 第一步： 导入mapState

import { mapState } from "vuex"

• 第二步：采用数组形式引入state属性

mapState(['count'])

上面代码最终得到的类似：

count () {
 return this.$store.state.count 
}

• 第三步：利用延展运算符将导出的状态映射给计算属性

computed:{
  ...mapState(['count'])
}

<div>state的数据： {{ count }}</div>

 

二 vuex基础-mutations

state数据的修改只能通过mutations，并且mutations必须是同步更新

定义mutations

const store = new Vuex.Store({
  state:{
    count:0
  },
 //定义mutationd
  mutations:{
   
  }
})

格式说明：

mutations 是一个对象，对象中存放修改state的方法

mutations:{
 //方法里参数 第一个参数是当前store的state属性
 // payload 载荷 运输参数 调用mutations的时候 可以传递参数 传递载荷
    addCount(state,payload){
       state.count += payload
    }
}，

 

如何在组件中调用mutations？

1.  原始形式 .$store

<template>
  <button @click="addCount">+1</button>
</template>

<script>
export default {
    methods: {
    //   调用方法
      addCount () {
         // 调用store中的mutations 提交给muations
        // commit('muations名称', 2)
        this.$store.commit('addCount', 10)  // 直接调用mutations
    }
  }
}
</script>

2.  辅助函数-mapMutations

• mapMutations和mapState 很像，它把位于 mutations 中的方法 提取了出来，我们可以将它导入

import { mapMutations } from "vuex"

methods:{
 ...mapMutations(['addCount'])
}

• 此时，就可以直接通过this.addCount 调用了

<button @click="addCount(100)">+100</button>

注意：Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放在actions中

 

三 vuex基础-actions

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

定义actions

actions :{
   // 获取异步的数据 context 表示当前的 store 的实例， 可以通过 context.state 获取状态 也可以通 
    //过 context.commit 来提交mutations，也可以 context.dispatch 调用其他的 action
    getAsyncCount (context){
        setTimeout(function(){
            //一秒钟之后，要给一个数 去修改state
            context.commit("addCount",123)
        },1000)
     }
}

 

如何在组件中调用actions？

1.  原始调用 .$store

addAsyncCount(){
    this.$store.dispatch("getAsyncCount")
}

2.  传参调用

addAsyncCount(){
    this.$store.dispatch("getAsyncCount",123)
}

3.  辅助函数-mapActions

• 导入到组件

import { mapActions } from "vuex"

methods:{
   ...mapActions(['getAsyncCount'])
}

• 直接通过this 方法就可以调用

<button @click="getAsyncCount(111)">+异步</button>

 

四 vuex基础-getters

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

例如，state中定义了list，为1-10的数组，

state: {
    list: [1,2,3,4,5,6,7,8,9,10]
}

组件中，需要显示所有大于5的数据，正常的方式，是需要list在组件中进行再一步的处理，但是getters可以帮助我们实现它

定义getters

  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

使用getters

1.  原始方式 -$store

<div>{{ $store.getters.filterList }}</div>

2.  辅助函数 - mapGetters

computed: {
    ...mapGetters(['filterList'])
}

 <div>{{ filterList }}</div>