Vuex là gì ? tại sao phải sử dụng Vuex ?

Xin chào các bạn mình là Danh.

Hôm nay mình xin giới thiệu đến các bạn một thư viện của một frame work khá nổi tiếng của vue.js là Vuex. Vuex là gì ? chức năng của nó là gì ? và nó hoạt động như thế nào mà trong một dự án sử dụng vue.js phải dùng đến vuex. Chúng ta cùng tìm hiểu nhé.

Vuex là gì ? Chức năng của Vuex ?

Vuex là gì? Chức năng của Vuex là gì ?

Vuex là mô hình quản lý các thuộc tính của thư viện ứng dụng Vue.js. Nó hoạt động như một kho lưu trữ tất cả các thuộc tính trong tất cả các thành phần trong một ứng dụng, với các quy tắc đảm bảo tất cả các thuộc tính đều luôn luôn có thể thay đổi một cách có kiểm soát. Các bạn có thể liên tưởng nó giống như ở frame work React.js thì ta dùng Redux để quản lý các thuộc tính mà được sử dụng cho toàn cục thì ở Vue.js chúng ta sẽ dùng Vuex để làm điều đó. Vuex đóng vai trò như nơi lưu trữ tất cả thuộc tính dùng cho toàn bộ tất cả các component. Nó có thể làm thay đổi các thuộc tính đó thông qua các phương thức

Vuex hoạt động như thế nào ?

chúng ta xem các ví dụ để hình dung các hoạt động của Vuex một các cụ thể hơn nhé.

State

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 1,
  },
  getters: {},
  mutations: {},
  actions: {},
  modules: {},
});

để sử dụng các thuộc tính trong store của Vuex chúng ta cần phải khởi tạo giátrị mặt định. Như ví dụ trên chúng ta đã khởi tạo ra một thuộc tính là count và gán một giá trị đầu tiên cho nó là một.

<template>
  <div class="home">
    <h1>thuộc tính count của store Vuex: {{ count }}</h1>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      info: "",
    };
  },
  computed: {
    count() {
      return this.$store.state.count;
    },
  },
};
</script>

//màng hình máy tính sẽ hiện ra:  thuộc tính count của store Vuex: 1

Khi muốn dùng đến thuộc tính của store thì bạn gọi thuộc tính đó trong một thuộc tính computed và gán giá trị là giá trị trả về của một phương thức vậy là ta đã lấy được thuộc tính count từ store và tiếp theo hiển thị ra giao diện và bất cứ lúc nào thuộc tính count trong store thay đổi thì thuộc tính count ở component sẽ được tính toán lại và thông báo đến DOM để cập nhật giá trị thuộc tính. Nếu chúng ta muốn dùng nhiều các thuộc tính cùng lúc thì chúng ta sẽ sử dụng mapState

Getter

đôi khi trong một obj trả về ta muốn lọc bớt đi một số thuộc tính không cần thiết các bạn xem ví dụ để hiểu thêm:

ở state info chúng ta có một obj nhưng chúng ta chỉ cần thuộc tính chiều cao. Chúng ta ở mỗi component phải sử lý điều này lặp đi lặp lại sẽ làm code rối. Nên chúng ta sẽ dùng getters để thuộc tính trả về đúng như mong muốn của mình

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    info: { name: "danh", height: 165 },
  },
  getters: {
    heightOfDanh(state) {
      return state.info.height;
    },
  },
  mutations: {},
  actions: {},
  modules: {},
});

<template>
  <div class="home">
    <h1>Chiều ca của Danh sử dụng getter để lọc thuộc tính: {{ height }}</h1>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      info: "",
    };
  },
  computed: {
    height() {
      return this.$store.getters.heightOfDanh;
    },
  },
};
</script>

và nếu bạn cần nhiều hàm chạy getter mà bạn phải khai báo rườm ra như thế sẽ làm code xấu và khó hiểu nên Vuex có hỗ trợ một chức năng là mapGetters cách sử dụng tương tự như mapState link hướng dẫn ở đây.

Mutations

Cách sử dụng tương tự getters nhưng Mutations không phải lấy dữ liệu mà nó còn biến đổi dữ liệu. Đây là cách duy nhất ta có thể sử dụng để biến đổi giá trị của thuộc tính trong store.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    info: { name: "danh", height: 165 },
  },
  getters: {
    heightOfDanh(state) {
      return state.info.height;
    },
  },
  mutations: {
    SET_HEIGHT(state) {
      state.info.height += 1;
    },
  },
  actions: {},
  modules: {},
});

<template>
  <div class="home">
    <h1>Chiều ca của Danh sử dụng getter để lọc thuộc tính: {{ height }}</h1>
    <button @click="clickUpHeight()">Up Height</button>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      info: "",
    };
  },
  computed: {
    height() {
      return this.$store.getters.heightOfDanh;
    },
  },
  methods: {
    clickUpHeight() {
      this.$store.commit("SET_HEIGHT");
    },
  },
};
</script>

// giá trị thuộc tính height sẽ tăng 1 giá trị sau mỗi lần nhấn nút

Actions

Action cũng tựa tựa như Mutations nhưng nó có vài điểm khác.
– thay vì thay đổi trạng thái, action commit mutations.
– action có thể chứa các hoạt động không đồng bộ.

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    info: { name: "danh", height: 165 },
  },
  getters: {
    heightOfDanh(state) {
      return state.info.height;
    },
  },
  mutations: {
    SET_HEIGHT(state) {
      state.info.height += 1;
    },
  },
  actions: {
    SET_HEIGHT(context) {
      context.commit("SET_HEIGHT");
    },
  },
  modules: {},
});

<template>
  <div class="home">
    <h1>Chiều ca của Danh sử dụng getter để lọc thuộc tính: {{ height }}</h1>
    <button @click="clickUpHeight()">Up Height</button>
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
      info: "",
    };
  },
  computed: {
    height() {
      return this.$store.getters.heightOfDanh;
    },
  },
  methods: {
    clickUpHeight() {
            // this.$store.commit("SET_HEIGHT");
                this.$store.dispatch("SET_HEIGHT");
    },
  },
};
</script>

// giá trị thuộc tính height sẽ tăng 1 giá trị sau mỗi lần nhấn nút

Và thế là chúng ta đã tìm hiểu sơ lược về Vuex và cách sử dụng và chức năng của Vuex. Cảm ơn các bạn đã đọc mọi thắc mắc vui lòng liện hệ qua mail danhnn@allxone.vn