Vue 3.x & Pinia Actions All In One

store 本质上就是一个全局的对象， Pinia Actions 类似 Vue 里面的 methods

single store

import { defineStore } from 'pinia';

// export declare function defineStore = {}, A = {}>(id: Id, options: Omit, 'id'>): StoreDefinition;

export const appStore = defineStore('appStore', {
  state() {
    return {
      msg: "Hello World!",
    };
  },
  getters: {
    // computed
    getMsg(): string {
      return `?? ${this.msg}`;
    }
  },
  actions: {
    // methods
    updateMsg(str: string) {
      this.msg = str;
    },
    async fetchData(url: string) {
      const json = await fetch(url).then(res => res.json());
      // console.log('json =', json);
      return json;
    },
  },
});

store.$patch

multi store

import { useAuthStore } from './auth-store'

// useSettingsStore
export const useSettingsStore = defineStore('settings', {
  state: () => ({
    preferences: null,
    // ...
  }),
  actions: {
    async fetchUserPreferences() {
      // useSettingsStore
      const auth = useAuthStore();
      if (auth.isAuthenticated) {
        this.preferences = await fetchPreferences()
      } else {
        throw new Error('User must be authenticated')
      }
    },
  },
});

https://pinia.vuejs.org/core-concepts/actions.html#accessing-other-stores-actions

storeToRefs

store state 解构，数据不响应式 bug， 需要使用 storeToRefs 包裹 ?

store action 可以直接解构，不需要使用 storeToRefs 包裹

import { storeToRefs } from 'pinia'

export default defineComponent({
  setup() {
    const store = useStore()
    // `name` and `doubleCount` are reactive refs
    // This will also create refs for properties added by plugins
    // but skip any action or non reactive (non ref/reactive) property
    const { name, doubleCount } = storeToRefs(store)
    // the increment action can be just extracted
    const { increment } = store

    return {
      name,
      doubleCount
      increment,
    }
  },
})

https://pinia.vuejs.org/core-concepts/#using-the-store

https://pinia.vuejs.org/api/modules/pinia.html#storetorefs

mapActions

not to use Composition API

import { mapActions } from 'pinia'
import { useCounterStore } from '../stores/counterStore'

export default {
  methods: {
    // gives access to this.increment() inside the component
    // same as calling from store.increment()
    ...mapActions(useCounterStore, ['increment'])
    // same as above but registers it as this.myOwnName()
    ...mapActions(useCounterStore, { myOwnName: 'doubleCounter' }),
  },
}

store.$onAction()

export default {
  setup() {
    const someStore = useSomeStore()

    // this subscription will be kept after the component is unmounted
    someStore.$onAction(callback, true)

    // ...
  },
}

regexp group

信息加密，电话号码隐藏

const phoneNumber = `18123456789`;

phoneNumber.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1****$2');
// '181****2345' ?

phoneNumber.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1****$3');
// '181****6789' ?

phoneNumber.replace(/^(\d{3})(\d{4})(\d{4})$/, '$1$2****');
// '1812345****' ?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp

const phoneNumber = `18123456789`;

phoneNumber.replace(/^(\d{3})(\d{4})(\d{4})$/, function(match, group1, group2, group3) {
  console.log("match, group1, group2, group3 =", match, group1, group2, group3);
});
// match, group1, group2, group3 = 18123456789 181 2345 6789

phoneNumber.replace(/^(\d{3})(\d{4})(\d{4})$/, (match, group1, group2, group3) => {
  console.log("match, group1, group2, group3 =", match, group1, group2, group3);
});
// match, group1, group2, group3 = 18123456789 181 2345 6789

phoneNumber.replace(/^(\d{3})(\d{4})(\d{4})$/, (match, ...groups) => {
  console.log("match, groups =", match, groups);
});
// match, groups = 18123456789 (5) ['181', '2345', '6789', 0, '18123456789']

RegExp group

https://regexper.com/#%2F^(\d{3})(\d{4})(\d{4})%24%2F

refs

?xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有??xgqfrms, 禁止转载 ???，侵权必究??！