동일한 코드베이스를 사용하여 동일한 페이지에 여러 Vue 인스턴스 표시

동일한 코드베이스를 사용하여 동일한 페이지에 여러 Vue 인스턴스 표시

저는 Vue.js의 기능을 WordPress 생태계에 도입하는 작업을 하고 있습니다.첫 번째 프로젝트는 페이지의 Search and Filtering입니다.

메인 웹사이트는 처음에 WordPress에 의해 PHP/HTML로 렌더링되고 있기 때문에 WordPress를 사용하여 출력하는 HTML 요소에 첨부하는 페이지에서 Vue를 초기화했습니다.이 모든 것이 완벽하게 작동하지만, 이제 동일한 코드베이스의 여러 인스턴스를 사용하여 한 단계 더 나아가려고 합니다(동작 가능).

다음 스크린샷의 예를 들어보십시오(WordPress 사이트라고 가정합니다).

전체 출력이 Vue.js에서 수행되지 않기 때문에 WordPress 측에서 여러 HTML DIV 요소를 출력하고 Vue를 초기화해야 합니다.

폼/필드는 사용자 설정/설정에 따라 동적으로 생성되므로 두 인스턴스 모두 동일한 코드 베이스가 사용됩니다.다만, 예를 들어 값이 선택 또는 변경되었을 때, 페이지상의 결과를 함께 갱신할 수 있도록, 어느 인스턴스에서도 같은 코드 베이스가 필요합니다.

데이터 오브젝트 의 각 함), 하여 를 합니다.JS에 대해서입니다.new Vue()인の인

첫 번째 생각은 Vuex 스토리지를 사용하여 단일 스토리지를 모든 인스턴스에 연결하고 선택한 값을 저장하며 이들 중 하나가 변경되면 디스패치를 실행하여 목록을 업데이트하는 것입니다.

전에 이와 비슷한 일을 해본 사람이 있나요?이 일을 하는 데 지칠 만한 일이 있나요?아니면 이 일을 어떻게 해야 하는지 더 좋은 제안이 있나요?

어려운 방법을 배우고 나중에 그것이 불가능할 수도 있고, 그렇게 하는 데 문제가 있을 수도 있다는 것을 깨닫는 것보다 여기서 물어보는 것이 더 낫다고 생각했습니다.

제안, 코멘트, 비판 또는 아이디어에 대해 대단히 감사합니다.

업데이트에서 Vue 인스턴스를 본체에 바인딩하는 방법만 제안하면render(div를 출력하여 첨부하는 대신) 필요한 경우 컴포넌트 HTML 요소를 출력합니다.험해보고고고고고? 지만이 이러 ?러 ??? ???

이 경우 Vue 인스턴스를 다음과 같이 초기화했습니다.

const sections = document.getElementsByClassName( "my-wrapper" )

for ( var i = 0; i < sections.length; i ++ ) {
    new Vue( {
         el: '#' + sections[ i ].id,
         store
     })
}

기본적으로 페이지에 있는 각 출력에서 새로운 Vue 인스턴스를 초기화하여 공유 저장소를 각 출력에 전달합니다.

이 여러 Vue 인스턴스 셋업은 직접 해본 적은 없지만 Vue가 이 사용 사례를 지원하도록 설계되어 있다는 것을 몇 군데에서 읽은 적이 있습니다.예를 들어, 다음을 참조해 주세요.Vue: 하나의 웹사이트에서 여러 개의 Vue 앱을 사용할 수 있습니까?

Vuex는 여러 컴포넌트를 갖춘 대규모 SPA에 매우 적합합니다.또한 모든 컴포넌트 간에 공유 루트인스턴스가 없는 경우에도 기본적으로는 동일합니다.여기서 Vuex 스토어는 페이지의 모든 Vue 컴포넌트를 앱 데이터의 "진실 정보"와 동기화하는 것이 매우 유용합니다.

질문의 그 부분을 이해할 수 있을지 모르겠네요.

첫 번째 생각은 Vuex 스토리지를 사용하여 단일 스토리지를 모든 인스턴스에 연결하고 선택한 값을 저장하며 이들 중 하나가 변경되면 디스패치를 실행하여 목록을 업데이트하는 것입니다.

Vuex 스토어에서 데이터가 업데이트될 때 Vuex를 올바르게 설정하면 DOM에 대한 업데이트가 자동으로 "반응적으로" 수행됩니다.스토어의 데이터를 수정하는 것 외에 취해야 할 조치는 없습니다.

업데이트 건입니다만, 잘 될 것 같습니다만, 별로 좋은 생각이 아닌 것 같습니다.이는 Vue가 일반적으로 사용되는 방식에 역행하는 것처럼 들리고 이러한 설정에 대해 언급한 문서의 부분은 기억나지 않습니다.

말씀드렸듯이, 저는 당신이 제안한 디자인에 대한 직접적인 경험이 없기 때문에 뭔가 놓친 것 같습니다.어차피 나눠먹어야 할 것 같아서요

더 많은 instance vue를 수행하려면 다음 코드의 vue에 접속하는 요소(el 요소에 주의)를 분리해야 합니다.

<div id="app" class="container">
        <my-component 
        v-for="(item,index) in array_2_element" 
        v-bind:item="item"
        v-bind:index="index"
        v-bind:key="item.name"
        > test componente <br> <my-component>
      </div>
      <hr><br>
  </div>
</div>

  <div id="todo-list-example">
    <form v-on:submit.prevent="addNewTodo">
      <label for="new-todo"> add a todo </label>
      <input type="text" 
      v-model="newTodoText"
      id="new-todo"
      placeholder="E.g. Feed to cat "
      >
      <button type="button" class="btn btn-primary"> add</button>
    </form>
    <ul>
      <li
      is="todo-item"
      v-for="(todo,index ) in todos "
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index,1)"
      ></li>
    </ul>
  </div>

<script> 
    var vm2= new Vue({
    el: '#todo-list-example',
    // do somethings 
});

var vm = new Vue({
    el: '#app',
    // do somethings 
})
</script>

언급URL : https://stackoverflow.com/questions/57715178/multiple-vue-instances-on-same-page-using-same-codebase