Pinia vs Vuex: управление состоянием во Vue

1npm install vuex

1import { createStore } from 'vuex';
2
3const store = createStore({
4  state() {
5    return {
6      count: 0,
7      user: null,
8    };
9  },
10  mutations: {
11    increment(state) {
12      state.count++;
13    },
14    setUser(state, user) {
15      state.user = user;
16    },
17  },
18  actions: {
19    async fetchUser({ commit }) {
20      const user = await api.getUser();
21      commit('setUser', user);
22    },
23  },
24  getters: {
25    doubleCount(state) {
26      return state.count * 2;
27    },
28  },
29});

1<script>
2import { mapState, mapMutations, mapActions } from 'vuex';
3
4export default {
5  computed: {
6    ...mapState(['count', 'user']),
7  },
8  methods: {
9    ...mapMutations(['increment']),
10    ...mapActions(['fetchUser']),
11  },
12};
13</script>

1npm install pinia

1import { defineStore } from 'pinia';
2
3export const useCounterStore = defineStore('counter', {
4  state: () => ({ count: 0 }),
5  getters: {
6    doubleCount: (state) => state.count * 2,
7  },
8  actions: {
9    increment() {
10      this.count++;
11    },
12  },
13});

1<script setup>
2import { useCounterStore } from '@/stores/counter';
3import { storeToRefs } from 'pinia';
4
5const counterStore = useCounterStore();
6const { count, doubleCount } = storeToRefs(counterStore);
7const { increment } = counterStore;
8</script>

1export const useCounterStore = defineStore('counter', () => {
2  const count = ref(0);
3  const doubleCount = computed(() => count.value * 2);
4
5  function increment() {
6    count.value++;
7  }
8
9  return { count, doubleCount, increment };
10});