vue cliでmixinを作成し、インポートする方法

備忘録です。

したいこと

・vue cliでmixinを作成し、componentファイルで使いたい

同じ動作を複数箇所で使用したい場合は、mixinが便利です。SCSS/SASSで使うmixinと同じ役割です。

Step 1: mixinはjsファイルに書く

mixinはvueファイルではなく、jsファイルに書きます。ここではmyFirstMixin.jsという名前のファイルを作りました。

補足：src のフォルダー内に mixinフォルダー を作成し、その中に mixinを書いたjsファイルたち を保存しておくと管理しやすそうです。

書き方はVueファイルで作ったコンポーネントの、scriptタグの中身と一緒です。ここではcomputedを使ったmixinを書いています。mixinしたい内容を書きます。

myFirstMixin.jsファイル内

export default {
    computed: {
        filteredBlogs: function(){
            return this.blogs.filter((blog) => {
                return blog.title.match(this.search);
            })
        }
    }
}

Step 2: コンポーネントファイルで読み込む

component.vueファイル内

<script>
import myFirstMixin from '../mixins/myFirstMixin';//ここでインポートする

export default {
  data() {
    return {
        //
    }
  },
  methods: {
  //
  },
mixins: [
    myFirstMixin
]
}//ここで登録する
</script>

これで使えるようになりました
初心者なので、何か誤解・勘違いがあれば、ご指摘いただけると幸いです