Pass data (computed) from vuex instance to component via router-link

Question

I'm trying to pass an array that is actually computed from the Vue instance section to my HTML. I'm using Vuex and route. Now, when I click to route live, I'd like to pass the array I'm receiving to the component so it can be rendered. Have tried several approaches but nothing has worked so far

//HTML
<ul class="navbar-nav">
 <li class="nav-item">
   <router-link to="/live" showdata="showData">Live Feed</router-link>
 </li>
</ul>
<router-view></router-view>


// Component
const Live = { 
 props:['showdata'],          
 template: 
   `<div id="feed" class="col-8 mt-3">{{showdata}}</div>`
};


// Routes
const routes = [ {path: "/live", component: Live, props: true} ];

const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
   routes,
});



// Websocket plugin

const plugin = function createWebSocketPlugin(){
 return (store) => {
   socket.on("post", data => {
     store.commit("update", data);
   })
 }
}



const store = Vuex.createStore({
 state() {
 return {
   data: [{}]
  }
},

mutations: {
  update(state, liveFeed) {
    state.data.push(liveFeed);
  }
},

 plugins: [plugin()]
});



// Vue instance
const app = Vue.createApp({
 computed: {
   showData() {return JSON.stringify(this.$store.state.data) }
 }
});

Answer 1

I've never seen a computed property inside a Vue instance. It's not necessary

I think when socket is called you should store the data in a state variable through an action (if it's async) or mutation . Then you can access globally to $state.showdata or ideally from a getter.

https://vuex.vuejs.org/guide/getters.html#property-style-access

In the component use mapGetters to get the computed datahttps://vuex.vuejs.org/guide/getters.html#the-mapgetters-helper