Skip to content

Example using vuex-to-pinia-transform

Store file converted by vuex-to-pinia-transform from vuex to pinia

Vuex store

js
export const state = () => ({
  username: "test123",
  firstname: "test",
  lastname: "123",
  age: "25",
});

export const mutations = {
  changeUsername(state, value) {
    state.username = value;
  },
};

export const actions = {
  generateRandomUsername({ commit, state }) {
    let newUsername = Math.floor(Math.random() * 100);
    newUsername = `${state.firstname}${state.lastname}${newUsername}`;
    commit("changeUsername", newUsername);
  },
  changeUsername({ commit, state }, newUsername) {
    commit("changeUsername", newUsername);
  },
};

export const getters = {
  firstname: (state) => {
    return state.firstname;
  },
  lastname: (state) => {
    return state.lastname;
  },
};

Code from vuex to pinia syntax

js
import { defineStore, storeToRefs } from "pinia";
export const useUserStore = defineStore('userStore', {
  state: function () {
    return {
      username: "test123",
      firstname: "test",
      lastname: "123",
      age: "25"
    };
  },
  actions: {
    changeUsernameMutation(value) {
      this.username = value;
    },
    generateRandomUsername() {
      let newUsername = Math.floor(Math.random() * 100);
      newUsername = `${this.firstname}${this.lastname}${newUsername}`;
      this.changeUsernameMutation(newUsername);
    },
    changeUsername(newUsername) {
      this.changeUsernameMutation(newUsername);
    }
  },
  getters: {
    firstnameGetter: function () {
      return this.firstname;
    },
    lastnameGetter: function () {
      return this.lastname;
    }
  }
});