The use of Vue Use State Effect as an alternative to Vuex and Pinia.

Murphydhee — Tue, 15 Aug 2023 22:45:58 +0000

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, kepping alive the native-like flow of the 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 to 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.

A Beginner's Guide: Setting Up a CI/CD Pipeline for Your Frontend Project with GitLab CI/CD

Murphydhee — Sun, 13 Aug 2023 02:32:43 +0000

In the current world of software development, having a super helper that checks your code and even delivers it to users in real-time. CI/CD are like your trusty assistants making sure your code is great and gets to users fast. CI/CD known as Continuous Integration and Continuous Deployment (CI/CD) pipelines automate the process of testing, building, and deploying code, ensuring that your application is always in its best shape. In this beginner-friendly guide, I will walk you through setting up a CI/CD pipeline for your front-end project using GitLab CI/CD.

Understanding CI/CD: A Quick Overview

Continuous Integration (CI) as the name implies means continually making code changes that are being integrated into a shared repository. This ensures that all code changes are automatically validated by automated builds and tests. However, on the other hand, Continuous Deployment (CD) automates the release of validated code to production safely sending your checked code to users so they can enjoy it.

Step 1: Creating a GitLab Repository

To begin, create a GitLab repository for your front-end project. If you're new to GitLab, sign up for an account, and then follow the prompts to create a new repository. Once your repository is ready, you can either upload your existing code or clone an empty repository to your local machine.

Step 2: Writing Tests

Before diving into the CI/CD setup, ensure you have a suite of tests for your front-end project. These tests will help catch bugs early in the development process. Frameworks like Jest, Mocha, Cypress or Jasmine can be used for writing tests, depending on your project's technology stack.

Step 3: Creating a `.gitlab-ci.yml` File

The .gitlab-ci.yml file is where you define your CI/CD pipeline stages and jobs. This file lives in the root directory of your repository. Here's a basic example:

stages:
  - build
  - test
  - deploy

build:
  stage: build
  script:
    - npm install

test:
  stage: test
  script:
    - npm test

deploy:
  stage: deploy
  script:
    - npm run build

In this example, we have three stages: build, test, and deploy. GitLab will automatically run jobs in these stages whenever you push new code to your repository.

Step 4: GitLab CI/CD Setup

Navigate to CI/CD Settings: In your GitLab repository, go to "Settings" > "CI/CD".

Runner Configuration: Choose whether you want to use shared runners or your runners. Runners are responsible for executing your CI/CD jobs.

Auto DevOps: GitLab offers an Auto DevOps feature that can automatically detect, build, test, and deploy your project based on common practices. For beginners, this can be a great starting point.

Step 5: Monitoring Your Pipeline

With your CI/CD pipeline set up, GitLab will automatically trigger jobs whenever you push code changes. You can monitor the progress and results of your pipeline in the "CI/CD" section of your GitLab repository.

Conclusion

Setting up a CI/CD pipeline might seem intimidating at first, but with tools like GitLab CI/CD, it becomes a manageable task. By automating the testing and deployment process, you'll save time, reduce errors, and ensure your front-end project is of the highest quality when it reaches your users.

Remember, this article is an introductory guide. As you become more comfortable with CI/CD, you can explore advanced features like environment variables, deployment strategies. I will cover these in a subsequent article.

DEV Community: Murphydhee