Clever Geek Handbook

VueJS 3：具有成分API的全局状态





新的Composition API使您摆脱了Vuex商店。让我们看一个简单的例子来实现这一目标。并考虑利弊。



例



让我们以Vuex中最简单的商店文档中的计数器为例，并使用composition API来实现它。



计数器模块模块/ counter.ts： 



import { ref } from 'vue'

const counter = ref(0)

export default function useCounter () {
  const increment = () => {
    counter.value++
  }
  return { counter, increment }
}


请注意，计数器变量在useCounter（）函数外部。因此，当在不同组件中调用useCounter函数时，counter将引用同一实例。这就是我们所需要的。



在不同组件中使用我们的计数器很简单： 



<template>
    <div>
      {{ counter }}
    </div>
   <button @click="increment">+</button>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import useCounter from '@/modules/useCounter'

export default defineComponent({
  name: 'App',
  setup () {
    const { counter, increment } = useCounter()
    return { counter, increment }
  }
})
</script>


要使用全局计数器，您只需要将useCounter导入所需的模块并使用它即可。



如果需要限制对计数器变量的访问，则可以不导出它，而是导出getter函数： 



import { ref, computed } from 'vue'

const counter = ref(0)
const getCounter = computed(() => counter.value)
const increment = () => counter.value++

export default function useCounter () {
  return { getCounter, increment }
}


利弊



Vuex的一大优点是使用Vue.js devtools。以树的形式查看整个全局状态，查看带有传递的变量的突变调用以及还可以回滚到不同状态非常方便。目前尚不清楚如何在Vue.js devtools中支持组合API，有关工作仍在进行中。



Vuex的结构-吸气剂，突变，动作-看起来在语法上是多余的，但是它可以清楚地表示和分离存储模块的工作，并且其优点多于弊。而且，使用组合API时，开发人员可以自己决定一切，他可以制作糖果，也可以不制作糖果。



对TypeScript的支持是Vuex的弱点。所有试图输入Vuex的文章都令人生畏。这就是冗长的Vuex变得非常冗长的方式。如果我们使用的是Composition API，那么它会更简单，请照常使用TypeScript。



Vuex作为插件连接，可通过此工具在每个组件中使用。对于composition API，我们需要导入模块。差别不大，并且两种方法都允许您使用全局状态。



另一方面，使用composition API可以减轻不必要的依赖，并可以方便地组织全局状态。另一方面，测试问题仍然存在。全局模块本身很容易测试，但是使用它们的模块已经更加难以测试。



结论



尚不清楚是否值得放弃Vuex，但是绝对有一个新工具可以让您解决Vuex解决的问题。在不久的将来，显然哪种方法更好，哪种情况下更好。同时，Vuex开发人员尚未宣布项目折叠，并像以前一样看到它，并且在Vue3文档中仍然有指向Vuex的链接。


More articles:


All Articles