Mixins的使用

实例：

1. mixins/RemoteData.js：

   export default function (resources) {
     return {
       data() {
         let initData = {
           removeDataLoading: 0,
           remoteErrors: {},
         }
         // 下面这个for循环很重要，如果不初始化数据，就不会被Vue添加响应式属性，因此组件不会在属性更改时更新
         for(const key in resources) {
           initData[key] = null
           initData.remoteErrors[key] = null
         }
         return initData
       },
       created () {
         // 在钩子函数中操作DOM建议加上this.$nextTick
         this.$nextTick (function () {
           for (const key in resources) {
             let url = resources[key]
             this.fetchResource(key, url)
           }
         })
       },
       methods: {
         async fetchResource (key, url) {
           this.$data.removeDataLoading++
           this.$data.remoteErrors[key] = null
           try {
             this.$data[key] = await this.$fetch(url)
           } catch (e) {
             // console.error(e)
             this.$data.remoteErrors[key] = e
           }
           this.$data.removeDataLoading--
         }
       },
       computed: {
         remoteDataBusy () {
           return  this.$data.removeDataLoading !== 0
         },
         hasRemoteErrors () {
           return Object.keys(this.$data.remoteErrors).some(
             key => this.$data.remoteErrors[key]
           )
         },
       }
     }
   }
   

2. FAQ.vue(使用mixins)：

   <template>
     <main class="faq">
       <h1>Frequently Asked Questions</h1>
       <div class="error" v-if="hasRemoteErrors">
         Can't load the questions
       </div>
       <Loading v-if="remoteDataBusy" />
   
       <section class="list">
         <article v-for="question of questions" :key="question._id">
           <h2 v-html="question.title"></h2>
           <p v-html="question.content"></p>
         </article>
       </section>
   
     </main>
   </template>
   
   <script>
     import RemoteData from '../mixins/RemoteData'
     export default {
       name: '',
       mixins: [
         RemoteData({
           questions: '/questions',
         })
       ],
     }
   </script>
   

建议：

当你的watch：{ }中所要监听的条目变多少，一个一个列出来貌似不是个很好的方法，所以就有了下面的一个方法

// 我们首先想到的方法是
export default function (id, fields) {
  return {
    // ......
    watch: {
      title: function (val) {
        localStorage.setItem('title', val)
      },
      description: function (val) {
        localStorage.setItem('description', val)
      }
    },
    // ......
  }
}

// 但是就如开头说的，如果要监听的条目变多上面的方法就显得不是那么灵活了
// 下面的方法用js自带的reduce方法将obj初始化为{}，然后通过循环读取数组中的元素添加进去，得到的结果和上个方法得到的是一样的
export default function (id, fields) {
  return {
    // ......
    watch: fields.reduce((obj, field) => {
      obj[field] = function (val) {
        localStorage.setItem(`${id}.${field}`, JSON.stringify(val))
      }
      return obj
    }, {}),
    // ......
  }
}

使用：

<script>
import PersistantData from '../mixins/PersistantData'

export default {
  mixins: [
    // 参数中我们给PersistantData提供了一个数组参数
    PersistantData('NewTicket', [
      'title',
      'description',
    ]),
  ],
}
</script>