vue-emoji-picker : import const from vuex module not yielding desired result

Question

I am trying to add custom emoji set to vue-emoji-picker based https://codepen.io/DCzajkowski/pen/gObWjEQ

I have implemented this with partial success. I get everything loaded, except "RECENT" not added to the emoji list. Any help is greatly appreciated.

//my store/index.js

import recentEmojis from "./modules/recentEmojis";
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
recentEmojis,
},

// store/modules/recentEmojis/index.js

export const defaultEmojis = {
"Frequently used": {
thumbs_up: "+1",
red_hreat: "heart",
},
People: {
   },
Nature: {
    },
Objects: {
},
Places: {
 },
Symbols: {
},};

const getName = (emoji) => {
console.log("getName");
const emojiMap = Object.values(defaultEmojis).reduce(
(a, b) => ({ ...a, ...b }),
{});
const object = Object.entries(emojiMap).find(
  // eslint-disable-next-line no-unused-vars
  ([_name, value]) => value === emoji
);
return object ? object[0] : null;
};
export default {
namespaced: true,
defaultEmojis,

state: {
recentlyUsedEmojis: [],
},
mutations: {
recentlyUsedEmojis: (state, recentlyUsedEmojis) =>
(state.recentlyUsedEmojis = recentlyUsedEmojis),
},
actions: {
addEmojiToRecent: ({ state, commit }, emoji) => {
  const name = getName(emoji);
  const rest = state.recentlyUsedEmojis
    .map(
      // eslint-disable-next-line no-unused-vars
      ([_name, value]) => value
    )
    .includes(emoji)
    ? state.recentlyUsedEmojis.filter(
        // eslint-disable-next-line no-unused-vars
        ([_name, value]) => value !== emoji
      )
    : state.recentlyUsedEmojis.length > 5
    ? state.recentlyUsedEmojis.slice(0, -1)
    : state.recentlyUsedEmojis;

  commit("recentlyUsedEmojis", [[name, emoji], ...rest])},},
getters: {
recentlyUsedEmojis: (state) =>
state.recentlyUsedEmojis.length
? { Recent: Object.fromEntries(state.recentlyUsedEmojis) }
: {},
},
}

//in my vue instance @ src/pages/edtor.default.vue

...

<emoji-picker :emoji-table="emojis" @emoji="append" :search="search">

....

<script> import axios from "axios"; 
import EmojiPicker from "vue-emoji-picker" 
import { defaultEmojis } from "../../store/modules/recentEmojis/index.js" // <<<<
export default { name: "ABCD", components: { EmojiPicker, }, 

... 

computed: { emojis() { return { ...this.$store.getters.recentlyUsedEmojis, ...defaultEmojis } }, },

......

methods: { append(emoji) { this.input += emoji this.$store.dispatch("recentEmojis/addEmojiToRecent", emoji) }, }

Answer 1

replaced

  ...this.$store.getters.recentlyUsedEmojis,  

with

...this.$store.getters['recentEmojis/recentlyUsedEmojis']