Thiết lập vuex, sử dụng state và getters trong vuex(P7)

Ở bài trước mình đã giới thiệu sơ qua về vuex sang bài này mình sẽ đi chi tiết về cách dùng của state và getters

Thiết lập sử dụng vuex

Các bạn có thể xem chi tiêt tại đây Mình hướng dẫn thiết lập bằng npm, các bạn mở project chạy lệnh sau để cài đặt vuex

npm install vuex --save

Sau khi cài đặt ta tạo 1 folder store để lưu trữ

• Thiết lập file index.js cho 1 module

file index.js cơ bản
import Vue from "vue";
import VueX from "vuex";
...
Vue.use(VueX);
const storeData = {
  state: {},
  getters:{},
  mutations:{},
  actions:{},
};
const store = new VueX.Store(storeData);
export default store;

Ta khai báo: state, getters, muations, actions trong storeData, các trạng thái và data sử dụng ta có thể định nghĩa trong từng phần tương ứng

• Thiết lập file index.js khi có nhiều modules Khi có nhiều modules thiết lập thì chúng ta dùng như sau

import Vue from "vue";
import VueX from "vuex";
Vue.use(VueX);
const moduleUser = {
  state: {},
  mutations: {},
  actions: {},
  getters: {}
};
const modulePost = {
  state: {},
  mutations: {},
  actions: {}
};
const storeData = {
  modules: {
    posts: modulePost,
    users: moduleUser
  }
};
const store = new VueX.Store(storeData);
export default store;

store.state.posts // -> `modulePost`'s state
store.state.users // -> `moduleUser`'s state

Chúng ta cũng có thể tách file ra cho gọn gàng dễ nhìn index.js

import Vue from "vue";
import VueX from "vuex";

// import modules
import auth from "./modules/users";
import todos from "./modules/posts";

Vue.use(VueX);
const storeData = {
  modules: {
    users,
    posts
  },

};
const store = new VueX.Store(storeData);

export default store;

tạo folder modules để lưu các module xử lý posts.js

import axios from "axios";

const postModule = {
  state: {
    posts: []
  },
  getters: {},
  actions: {},
  mutations: {}
};
export default postModule;

State

• Ví dụ ta có 1 danh sách cách bài viết tĩnh muốn hiển thị lên như sau Thiết lập data bài viết trong state po

 state: {
    posts: [
      {
        id: 1,
        title: "Bài viết số 1"
      },
      {
        id: 2,
        title: "Bài viết số 2"
      },
      {
        id: 3,
        title: "Bài viết số 3"
      },
      {
        id: 4,
        title: "Bài viết số 4"
      }
    ]
  },

Lấy danh sách bài viết ra render ở component Post.vue

<template>
  <div>
    <h1>Danh sách bài viết</h1>
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "list-post",
  computed: {
    posts() {
      return this.$store.state.posts.posts;
    }
  }
};
</script>
<style scoped></style>

Vậy ta đã lấy được danh sách bài viết dựa vào store và state

Getters

• Ta có cách khác để lấy được data posts dùng getters để trả về data posts.js

 getters: {
    posts: state => state.posts
  },

Post.vue thay vào computed:

posts() {
  return this.$store.getters.posts;
}

Ta có thể gọi getters ngắn gọn như sau

import { mapGetters } from "vuex";
export default {
  name: "list-post",
  computed: {
    ...mapGetters(["posts"]),
    // posts() {
    //   return this.$store.getters.posts;
    // }
  }
};

Như vậy mình đã giới thiệu cho mọi người thiết lập vuex cách dùng state và getters bạn cần luyện tập nhiều hơn để hiểu rõ hơn. Bài sau mình sẽ giới thiệu cho các bạn về mutations và actions cách lấy data động