use vuex save state

ITJesse · ITJesse · commit 03cadc1eea6b · 2018-01-13T09:20:16.000+09:00
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
@@ -34,6 +34,9 @@ module.exports = {
       'optionalDependencies': ['test/unit/index.js']
     }],
     // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
+    'no-param-reassign': [2, {
+      'props': false
+    }],
   }
 }
diff --git a/web/package-lock.json b/web/package-lock.json
diff --git a/web/package.json b/web/package.json
@@ -18,7 +18,8 @@
     "moment": "^2.19.1",
     "vue": "^2.5.2",
     "vue-lazyload": "^1.1.4",
-    "vue-router": "^3.0.1"
+    "vue-router": "^3.0.1",
+    "vuex": "^3.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^7.1.2",
diff --git a/web/src/App.vue b/web/src/App.vue
@@ -1,27 +1,29 @@
 <template>
   <div id="app">
     <nav>
-      <router-view name="navbar" :info="info"></router-view>
+      <router-view name="navbar"></router-view>
     </nav>
 
-    <router-view name="welcome" :info="info"></router-view>
+    <router-view name="welcome"></router-view>
 
     <div class="container">
-      <router-view name="container" :info="info"></router-view>
+      <router-view name="container"></router-view>
     </div>
   </div>
 </template>
 
 <script>
 import axios from 'axios';
+import { mapState, mapMutations } from 'vuex';
 
 export default {
   name: 'app',
-  data() {
-    return {
-      info: {},
-    };
-  },
+  methods: mapMutations([
+    'setInfo',
+  ]),
+  computed: mapState([
+    'info',
+  ]),
   async mounted() {
     let data;
     try {
@@ -30,7 +32,9 @@ export default {
       this.showNetworkErrorAlert = true;
       return;
     }
-    this.info = data.data;
+    this.setInfo({
+      info: data.data,
+    });
   },
 };
 </script>
diff --git a/web/src/components/Footer.vue b/web/src/components/Footer.vue
@@ -9,11 +9,15 @@
 
 <script>
 import moment from 'moment';
+import { mapState } from 'vuex';
 
 export default {
   name: 'Footer',
-  props: ['info', 'player'],
+  props: ['player'],
   computed: {
+    ...mapState([
+      'info',
+    ]),
     lastUpdate() {
       if (this.player && this.info) {
         return moment(this.player.lastUpdate || 0).format(this.info.timeFormat ? this.info.timeFormat.full : '');
diff --git a/web/src/components/Membership.vue b/web/src/components/Membership.vue
@@ -35,11 +35,15 @@
 
 <script>
 import moment from 'moment';
+import { mapState } from 'vuex';
 
 export default {
   name: 'Membership',
-  props: ['player', 'info'],
+  props: ['player'],
   computed: {
+    ...mapState([
+      'info',
+    ]),
     timeStart() {
       return moment(this.player.data.time_start).format(this.info.timeFormat ? this.info.timeFormat.full : '');
     },
diff --git a/web/src/components/Name.vue b/web/src/components/Name.vue
@@ -10,11 +10,15 @@
 
 <script>
 import moment from 'moment';
+import { mapState } from 'vuex';
 
 export default {
   name: 'Name',
-  props: ['name', 'info'],
+  props: ['name'],
   computed: {
+    ...mapState([
+      'info',
+    ]),
     changedToAt() {
       return moment(name.changedToAt).format(this.info.timeFormat ? this.info.timeFormat.compact : '');
     },
diff --git a/web/src/components/NameHistory.vue b/web/src/components/NameHistory.vue
@@ -9,7 +9,7 @@
       </div>
       <div class="panel-body">
         <ul class="list-group">
-          <name v-for="(name, key, index) in player.data.names" :key="index" :name="name" :info="info"></name>
+          <name v-for="(name, key, index) in player.data.names" :key="index" :name="name"></name>
         </ul>
       </div>
     </div>
@@ -21,7 +21,7 @@ import Name from './Name';
 
 export default {
   name: 'NameHistory',
-  props: ['player', 'info'],
+  props: ['player'],
   components: {
     name: Name,
   },
diff --git a/web/src/components/Navbar.vue b/web/src/components/Navbar.vue
@@ -17,9 +17,13 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
+
 export default {
   name: 'Navbar',
-  props: ['info'],
+  computed: mapState([
+    'info',
+  ]),
 };
 
 </script>
diff --git a/web/src/components/PlayerAdvancement.vue b/web/src/components/PlayerAdvancement.vue
@@ -49,12 +49,13 @@
 </template>
 
 <script>
+import { mapState } from 'vuex';
 import AdvancementBlock from './AdvancementBlock';
 import AchievementBlock from './AchievementBlock';
 
 export default {
   name: 'PlayerAdvancement',
-  props: ['player', 'info'],
+  props: ['player'],
   data() {
     return {
       advTotal: 0,
@@ -68,6 +69,11 @@ export default {
   mounted() {
     this.dealWithAdvancements(this.player.advancements);
   },
+  computed: {
+    ...mapState([
+      'info',
+    ]),
+  },
   methods: {
     dealWithAdvancements(advancements) {
       Object.keys(advancements).forEach((k) => {
diff --git a/web/src/components/PlayerList.vue b/web/src/components/PlayerList.vue
@@ -11,24 +11,24 @@
       <b-col sm="12"><b-form-input id="input-none" type="text" v-model="keyword" placeholder="Search User Name"></b-form-input></b-col>
     </b-row>
     <lazy-component class="row">
-      <playerblock v-for="(player, key, index) in players" :key="index" :player="player" v-show="search(player)"></playerblock>
+      <playerblock v-for="(player, key, index) in playerList" :key="index" :player="player" v-show="search(player)"></playerblock>
     </lazy-component>
     <hr/>
-    <nyaa-footer :info="info"></nyaa-footer>
+    <nyaa-footer></nyaa-footer>
   </div>
 </template>
 
 <script>
 import axios from 'axios';
+import { mapState, mapMutations } from 'vuex';
+
 import PlayerBlock from './PlayerBlock';
 import Footer from './Footer';
 
 export default {
   name: 'PlayerList',
-  props: ['info'],
   data() {
     return {
-      players: [],
       showNetworkErrorAlert: false,
       keyword: '',
       searchTimer: null,
@@ -37,20 +37,30 @@ export default {
     };
   },
   async mounted() {
-    let data;
-    try {
-      data = await axios.get('/static/data/players.json');
-    } catch (error) {
-      this.showNetworkErrorAlert = true;
-      return;
+    if (this.playerList.length < 1) {
+      let data;
+      try {
+        data = await axios.get('/static/data/players.json');
+      } catch (error) {
+        this.showNetworkErrorAlert = true;
+        return;
+      }
+      this.setPlayerList({
+        playerList: data.data,
+      });
     }
-    this.players = data.data;
     this.loading = false;
   },
   watch: {
     keyword: 'lazyload',
   },
+  computed: mapState([
+    'playerList',
+  ]),
   methods: {
+    ...mapMutations([
+      'setPlayerList',
+    ]),
     lazyload() {
       clearTimeout(this.timer);
       this.timer = setTimeout(() => {
diff --git a/web/src/components/PlayerPage.vue b/web/src/components/PlayerPage.vue
@@ -21,8 +21,8 @@
         </div>
         <div class="col-sm-12 col-md-9 col-lg-10">
           <div class="row">
-            <membership :info="info" :player="player"></membership>
-            <name-history :info="info" :player="player"></name-history>
+            <membership :player="player"></membership>
+            <name-history :player="player"></name-history>
           </div>
         </div>
       </div>
@@ -35,19 +35,21 @@
         </ol>
       </div>
 
-      <player-advancement :player="player" :info="info" />
+      <player-advancement :player="player" />
       <player-statistic :player="player" />
 
       <hr/>
 
-      <nyaa-footer :info="info"></nyaa-footer>
+      <nyaa-footer></nyaa-footer>
     </div>
   </div>
 </template>
 
 <script>
 import axios from 'axios';
+import { mapMutations } from 'vuex';
 
+import { store } from '../main';
 import NameHistory from './NameHistory';
 import Membership from './Membership';
 import PlayerAdvancement from './PlayerAdvancement';
@@ -56,9 +58,9 @@ import Footer from './Footer';
 
 export default {
   name: 'PlayerPage',
-  props: ['info'],
   data() {
     return {
+      mutableInfo: null,
       player: null,
       uuid: '',
       showNetworkErrorAlert: false,
@@ -67,40 +69,38 @@ export default {
   },
   async beforeRouteEnter(to, from, next) {
     const uuid = to.params.uuid;
-    let data;
-    try {
-      data = await axios.get(`/static/data/${uuid}/stats.json`);
-    } catch (error) {
-      this.showNetworkErrorAlert = true;
-      return;
+    let player;
+    if (!store.state.players[uuid]) {
+      let data;
+      try {
+        data = await axios.get(`/static/data/${uuid}/stats.json`);
+      } catch (error) {
+        this.showNetworkErrorAlert = true;
+        return;
+      }
+      player = data.data;
+    } else {
+      player = store.state.players[uuid];
     }
     next((vm) => {
-      vm.setPlayerData(data.data);
-      vm.setUUID(uuid);
+      vm.setPlayerData(uuid, player);
     });
   },
-  async beforeRouteUpdate(to, from, next) {
-    this.player = null;
-    this.progress = 0;
-    const uuid = to.params.uuid;
-    let data;
-    try {
-      data = await axios.get(`/static/data/${uuid}/stats.json`);
-    } catch (error) {
-      this.showNetworkErrorAlert = true;
-      return;
-    }
-    this.setPlayerData(data.data);
-    this.setUUID(uuid);
-    next();
-  },
   methods: {
-    setPlayerData(data) {
+    ...mapMutations([
+      'setPlayer',
+    ]),
+    setPlayerData(uuid, data) {
       this.progress = 100;
+      this.uuid = uuid;
       this.player = data;
+      this.setPlayer({
+        uuid,
+        player: data,
+      });
     },
-    setUUID(uuid) {
-      this.uuid = uuid;
+    setInfoData(data) {
+      this.mutableInfo = data;
     },
   },
   computed: {
diff --git a/web/src/components/Welcome.vue b/web/src/components/Welcome.vue
@@ -12,11 +12,14 @@
 
 <script>
 import moment from 'moment';
+import { mapState } from 'vuex';
 
 export default {
   name: 'Welcome',
-  props: ['info'],
   computed: {
+    ...mapState([
+      'info',
+    ]),
     worldTime() {
       return moment.duration(this.info.worldTime || 0, 'seconds').humanize();
     },
diff --git a/web/src/main.js b/web/src/main.js

Original file line number	Diff line number	Diff line change
`@@ -34,6 +34,9 @@ module.exports = {`
`34`	`34`	`'optionalDependencies': ['test/unit/index.js']`
`35`	`35`	`}],`
`36`	`36`	`// allow debugger during development`
`37`		`- 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0`
	`37`	`+ 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,`
	`38`	`+ 'no-param-reassign': [2, {`
	`39`	`+ 'props': false`
	`40`	`+ }],`
`38`	`41`	`}`
`39`	`42`	`}`