すべてのカテゴリ

Vueでページ毎にアクセス権を設定する方法Vue と Firebase を組み合わせて、利用者限定のサービスを実装する方法を紹介しました。実際の Web アプリケーションでは、アクセスできる人を限定したページと、誰でもアクセスできるページが混在する場合もたくさんあります。例えば、ブログのようなサイトを考えた場合は、記事を投稿するのは「管理者」だけで、閲覧は誰でもできるとうケースもたくさんあります。この記事では、ページ毎にアクセス権を設定する方法を紹介しています。Vue プロジェクトの作成最初に、Vue のサンプルプロジェクトを作成します。 今回の実装例では、＊　Vue Router＊　Pinia を利用します。 最初にサンプルプロジェクトを作成する際に組み込んで起きます。サンプルプロジェクトの作成にはViteを利用しています。　% npm init vueVue.js - The Progressive JavaScript Framework✔ Project name: … vue-firebase-sample✔ Add TypeScript? … No / Yes✔ Add JSX Support? … No / Yes✔ Add Vue Router for Single Page Application development? … No / Yes✔ Add Pinia for state management? … No / Yes✔ Add Vitest for Unit Testing? … No / Yes✔ Add Cypress for both Un

PiniaでVue アプリのデータを一括管理Vue の部品の間でデータをやり取りする方法を、Vue 公式チュートリアルで学習しました。しかし、部品を呼び出す階層が深くなったり、Vue Router などを使う場合には、データの受け渡しが面倒になる場合があります。このような場合には、Vue のアプリ内で一括してデータの管理ができると便利です。この記事では、Vue の公式サイトで推奨されているパッケージ（モジュール）の「Pinia」を紹介します。Pinia とは？Pinia は、Vue の「部品」間でデータを共有するためのモジュールです。 同じような機能を提供するモジュールは他にもありますが、2022 年 4 月現在、Vue の公式ページで推奨されている、「ストアライブラリ」です。（＊）日本語の公式サイトでは、従来から利用されてきた「Vuex」が推奨されていますが、英語の Vue のサイトでは、「Pinia」が推奨されています。Vuex でも Pinia のどちらも Vue で利用可能ですが、初心者には、Pinia の方がシンプルな実装なので簡単に導入できると思います。Vite のテンプレートを利用して、Vue のサンプルプロジェクトを作成する場合には、プロジェクト作成時にこの「Pinia」を予め組み込む事が可能です。他の似たような仕組みに React と組み合わせて利用される事の多い「Redux」があります。Vue でも Redux を利用することは可能ですが、使いやすさを考えると、「Pinina」か「Vuex」を利用する方が便利です。ストアライブラリを利用する利点Web アプリ