[Vuex] Create a Vuex Store using TypeScript

Posted 2021-10-25 answer1215

A Vuex store centralizes the state of your app, making it easy to reason about your state flow.

In this lesson we’ll see how we can create a Vuex store using TypeScript and use it on you class-based component by using the @State decorator from Vuex Class

 

Install:

npm i vuex vuex-class --save

 

Create store folder and index.ts, todos.ts file:

//store/index.ts

import Vue from ‘vue‘;
import Vuex from ‘vuex‘;

import todos from ‘./todos‘;

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    ...todos,
  },
  mutations: {

  },
  actions: {

  },
});


// store/todos.ts
import {State} from ‘../types‘;

const state: State = {
    todos: [
        {text: ‘Buy milk‘},
    ],
};

export default state;

 

Define the State interface:

// types.ts

export interface Todo {
    text: string;
}

export interface State {
    todos: Todo[];
}

 

Using Store in main.ts:

import ‘./hooks‘;

import Vue from ‘vue‘;
import App from ‘./App.vue‘;
import router from ‘@/router‘;
import store from ‘@/store/index‘;
import ‘@/registerServiceWorker‘;
Vue.config.productionTip = false;


new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount(‘#app‘);

 

Create a Todos.vue component:

<template>
    <ul>
      <li v-for="todo in todos">{{ todo.text }}</li>
    </ul>
</template>

<script lang="ts">
import {Component, Vue} from ‘vue-property-decorator‘;
import {State} from ‘vuex-class‘;
import {Todo} from ‘../types‘;

@Component({
})
export default class Todos extends Vue {
    @State todos: Todo[]
}
</script>

 

See the commit