Making use of Vue Use State Effect - a fast alternative to Vuex and Pinia.

In the dynamic world of Vue.js, state management has been a pivotal challenge. Vuex, the stalwart solution, has served us well with its versatility and extensive capabilities. However, as applications grew, the need for a more lightweight and less complex alternative arose. With Vue 3's Composition API, a new era dawned, allowing developers to rethink state management, this gave birth to Pinia.

A Breath of Fresh Air you could say as Pinia, a powerful and intuitive state management solution that emerged from the desire to simplify and optimize Vuex's complex ecosystem. Pinia integrates seamlessly with Vue 3's Composition API, presenting developers with a streamlined alternative. By eliminating the need for mutations, commits, and data dispatching, Pinia offers a minimalistic approach to the way to state management. Its simplicity doesn't compromise on versatility, making it a refreshing choice for modern Vue applications.

Composables: The Composition API's Hidden Gem Vue 3's Composition API introduces a game-changing concept known as EffectScope. This innovative feature records all effects created during a component's lifecycle, including computed properties. What sets EffectScope apart is its ability to be shared across the application, facilitating the attachment of additional data.

Empowering Developers with Vue Use State Effect library. The Vue Use State Effect harnesses the power of EffectScope to bring a new level of control and flexibility to state management. By encapsulating composable states, it provides a seamless sharing mechanism across different components. This approach eliminates the need for unnecessary abstractions, letting developers create custom logic while retaining the innate development flow. The era of unwieldy state management solutions is fading, replaced by tailored approaches that align with Vue 3's ethos. With these tools at your disposal, you can create applications that are not only efficient but also optimized for the modern web landscape.

And that's how and why the vue-state-effect library was created. with it as your arsenal, you can shape the composable however you want to share can be wrapped and joined. Used in the other components afterwards. Finally, without any additional abstraction, you can use it to create sharable states/stores inside your application - handling them via composables with your own custom logic. Still, keeping alive the native-like flow of development. Awesome right?

To tackle data stacking, it provides us with Destroy utility to avoid data stacking whenever you want.

To kick start the process you will have to install the the Vue-use-state-effect

/* composables/useSharedState.ts */

import { ref } from 'vue'

const sharedState = () => {
  const state = ref({
    test: ' First state value.',
  })
  const updateState = () => {
    state.value = {
      test: ' Updated state value.',
    }
  }
  return {
    state,
    updateState,
  }
}

The next step is to import the vue-use-state-effect and use it with our newly created composable. Notice that this is done in the same file/component.

/* composables/useSharedState.ts */

import { useStateEffect } from 'vue-use-state-effect'

/* your composable logic goes here  */

export const useSharedState: any = useStateEffect(sharedState, {
  name: 'sharedState',
  debug: true,
  destroy: false,
})

Now we’ve just created the shared composable, we can move along with our components. Let’s create one and check how we can use it.

<!-- Landing Page | landing.vue -->

<template>
  <div>{{ test Component }}</div>
  <button @click="updateState">Update the state</button>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useSharedState } from '@composables/useSharedState'

const {
  sharedState: { state, updateState },
} = useSharedState()

const test = computed(() => state.value.test) // 'First state value.',
</script>

From the code snippet above you can see that we import the state/store data from the composable. The parent object key is defined on top of the name provided within the composable. Making use of the computed property to create the reactive one to reflect it in the template. In addition to that we passed the update method through the use of the button to update the state from the UI. Now we can create a new page to render the updated state.

<!-- New Page | newPage.vue -->

<template>
  <div>{{ test component }}</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useSharedState } from '@composables/useSharedState'

const {
  sharedState: { state },
} = useSharedState()
const test = ref(state.value.test) // 'Updated state value.',
</script>

The power is now in your hands. With this knowledge, you're equipped to wield your shared state (composable) seamlessly throughout your application. And should you wish to ensure a tidy application lifecycle, the destroy option stands ready to declutter your data.

Here's a quick pro-tip: in scenarios involving asynchronously rendered components, in the cases of Nuxt, the onMounted hook comes to your aid, enabling you to reclaim your reconstructed state. The journey to exploring state management has taken an even more intriguing turn!

Back to our New page

<!-- New Page | newPage.vue -->

<script setup lang="ts">
import { onMounted } from 'vue'

const test = ref('')

onMounted(() => {
  const {
    sharedState: { state },
  } = useSharedState()
  test.value = state.value.test
})
</script>

Now the most important question I am guessing has been on the back of your mind since the start of this article.

Are there any downsides to what might seem like the ultimate tool? I know it seems too good to be true but Yes! Due to its simplicity, you won't experience the same structured format and flow as seen in Pinia or Vuex. Additionally, it won't be visible in dev tools. However, there's a debug mode that can serve as a reasonable alternative. You might encounter other limitations as well, as it's not a one-size-fits-all solution for every project. Finding the right balance is key.

Simplistic and primal, everything more and a little less when it comes to the majority of small Vue apps. I recommend it as it might be the best, fastest, and most convenient solution. Just give it a try, now or with your next project and let me know how it goes in the comments.