vuex结合Composition Api

vuex结合Composition Api使用，如果你之前对vuex比较了解用的比较熟悉，那这一篇文章，相信你会很容易就看懂的。

安装vuex

npm install vuex@next --save

yarn add vuex@next --save

安装完了之后再新建vuex目录这里与之前文章里面写到的一样，你可以去看看vuex的基本使用。这里主要讲解vuex在Composition Api怎么使用。

Composition Api使用vuex（在组件中获取state，执行mutations方法）

<template>
<div class='vuex'>
  {{count}}
  <hr>
  {{$store}}
  <br>
  <button @click="setCount(10)">修改count的值(执行方法)</button>
</div>
</template>
<script type="ts">
import {computed,defineComponent} from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  

name: 'vuex',
setup(){
  const store = useStore()
  return{
    // 获取state
    count:computed(()=> store.state.count),
    // 获取getter 执行mutations方法
    setCount:(e)=>{
      store.commit('setCount',e)
    }
  }
 },
})
</script>
<style lang='less' scoped>
</style>

Composition Api使用vuex获取getters/actions里面的方法

<template>
<div class='vuex'>
  {{count}}
  <hr>
  {{$store}}
  <br>
  <button @click="setCount(10)">修改count的值(执行mutations方法)</button>
  <br>
  <hr>
  {{num}}
  <br>
  <hr>
  <button @click="actionsClick">出发actions方法</button>
</div>
</template>
<script type="ts">
import {computed,defineComponent} from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
name: 'vuex',
setup(){
  const store = useStore()
  return{
    // 获取state
    count:computed(()=> store.state.count),
    // 执行mutations方法
    setCount:(e)=>{
      store.commit('setCount',e)
    },
    //获取getter 方法
    num:computed(()=>{
      return store.getters.doneTodos 
    }),
    //出发actions方法
    actionsClick(){
      store.dispatch('setContent')
    }
  }
 },
})
</script>
<style lang='less' scoped>
</style>

上面所写到的就是在Composition Api中使用vuex的方法，基本上与vuex常规使用一样，写法上略有不同，你看懂了吗？