menu
書いてる野郎
orebike@gmail.com
今まで全部1個のファイルに書いてきたのでこれをそろそろ分割してみる。 何をするわけでもなく分割する。
バラバラに書いてこのように統合する
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Hello</title> <link rel="stylesheet" type="text/css" href="index.css" /> <script src="https://unpkg.com/vue@latest"></script> <script src="https://unpkg.com/vuex@latest"></script> <script src="data.js"></script> <script src="ItemName.js"></script> <script src="File.js"></script> <script src="RootFolder.js"></script> <script src="Folder.js"></script> </head> <body> <div id="app"> <root-folder v-bind:items="rootItems"></root-folder> </div> <script> var vm = new Vue({ el: "#app", store: store, computed: { rootItems: function(){ return this.$store.state.items; } } }); </script> </body> </html>
大切なのは順番で、全部のファイルは Vue に依存していて、次に Vuex、Vuex があるから store が構築できて、 それをデータに取る ItemName,それを使う File, 継承する RootFolder Folder と続く。
動かしてみるとちゃんと動く。