Как создать и создать экземпляр магазина с помощью VueX, вызываемого через cdn?

Я работаю над проектом php / vuejs. Нет ни npm, ни пряжи, ни какого-либо инструмента для установки пакетов, поэтому члены команды всегда добавляют ссылку cdn ко всему, что им нужно. В этом случае мне нужно добавить Vuex + vuex-persistedstate, но я не вижу, как его запустить и создать экземпляр ... буквально не знаю. Если кто-нибудь может показать мне, где я могу найти эту информацию, или разместит ее здесь в качестве ответа, я буду более чем благодарен.

Я попробовал это, и это не сработало:

vueInstance.js

const app = new Vue({
    el: '#app',
    store: store,
...

footer.php

<script src = "https://unpkg.com/vuex"></script> 
<script src = "https://unpkg.com/vuex-persistedstate/dist/vuex-persistedstate.umd.js"></script>
<script> Vue.use(Vuex)</script>

store.js

const store = new Vuex.Store({
    state: {
      count: 0
    },
    mutations: {
      increment (state) {
        state.count++
      }
    }
  })

Посмотри на этот документация

— 09.04.2021 17:26

vue.js vuex

09.04.2021 17:21

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Ответы 1

я сделал пример, как использовать cdn и vuex + vuex-persist (простое приложение счетчика) когда вы меняете счетчик, вы можете увидеть свой браузер localStorage, чтобы увидеть изменения

и я надеюсь, что это поможет вам :)

`important note`:

Используйте только vuex-persist v2.2.0 последней версии (v3.1.3), есть проблема и отображается сообщение об ошибке в браузере.

вы можете увидеть это также в коде: https://codepen.io/Mohamadmasoudi/pen/KKaZMOo

<!DOCTYPE html>
<html lang = "en">
<head>
  <meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <title>Vuex - VuexPersist example</title>
</head>
<body>
  
  <div id = "app">
    count is: {{count}}
    <button @click = "increment">+</button>
    <button @click = "decrement">-</button>
  </div>

  <script src = "https://vuejs.org/js/vue.js"></script>
  <script src = "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.10/lodash.min.js"></script>
  <script src = "https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <script src = "https://unpkg.com/[email protected]/dist/vuex.js"></script>
  <script>

  
  const vuexLocal = new window.VuexPersistence.VuexPersistence({
      storage: window.localStorage,
  });

  const store = new Vuex.Store({
    state: { count: 0 },
    mutations: { 
      increment (state) {
        state.count++
      },
      decrement (state) {
        state.count--
      }
    },
    actions: {  },
    plugins: [vuexLocal.plugin]
  });
  
  vm = new Vue({
    el: "#app",
    store: store,
    methods: {
      increment(){
        store.commit('increment');
      },
      decrement(){
        store.commit('decrement');
      }
    },
    computed: { 
      count(){
        return store.state.count
      }
    }
  });

  </script>

</body>
</html>

09.04.2021 23:28