Estoy usando vue a través de CDN Script así:
const Home = { 'template': `<h1>[[ $store.state.count ]]</h2>`, } const routes = [ { path: '/', name: 'home', component: Home }, ... ] const vuex_store = new Vuex.Store({ state: { count: 45, } ... }) ... const router = VueRouter.createRouter({ history: VueRouter.createWebHashHistory(), routes, }) const app = Vue.createApp({ compilerOptions: { delimiters: ["[[", "]]"] }, store: vuex_store, data(){ return {}} ... }) app.use(router) app.mount('#app') Pero no puedo acceder ni a los data() ni a $state en las rutas, excepto solo la página en la que se encuentra el script.
No estoy usando npm ni ningún administrador de paquetes, y debido a ciertas restricciones, estoy atascado con este método.
¿Cómo puedo hacer que esto funcione? TENGA EL ESTADO/DATOS COMPARTIDOS EN TODAS LAS PLANTILLAS DE RUTA.
los delimiters no son una opción global, por lo que debe definirlos en cada componente que tenga
dentro de sus opciones createApp vio el store de propiedades, no es la sintaxis correcta para la version 3 de Vue.js , debe usarlo como su enrutador con la sintaxis app.use()
por último, debe usar <router-view></router-view> en su HTML para representar la salida (supongo que usó pero de todos modos)
puede ver un ejemplo práctico de su pregunta en el siguiente fragmento:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>use vuex in cdn way</title> </head> <body> <div id="app"> <router-view></router-view> </div> <script src="https://unpkg.com/vue@3"></script> <script src="https://unpkg.com/vue-router@4"></script> <script src="https://unpkg.com/vuex@4"></script> <script> const Home = { compilerOptions: { delimiters: ["[[", "]]"], }, template: `<h1>[[ $store.state.count ]]</h1>`, }; const routes = [ { path: "/", name: "home", component: Home, }, ]; const vuex_store = new Vuex.Store({ state: { count: 45, }, }); const router = VueRouter.createRouter({ history: VueRouter.createWebHashHistory(), routes, }); const app = Vue.createApp({}); app.use(router); app.use(vuex_store); app.mount("#app"); </script> </body> </html>