请选择 进入手机版 | 继续访问电脑版

英溯IT论坛

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 856|回复: 0

vue3.4.15ストア操作ガイド 保存、取得、更新、削除の使...

[复制链接]

94

主题

101

帖子

510

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
510
发表于 2024-2-3 16:59:13 | 显示全部楼层 |阅读模式
Vue.js 3のストア(Vuex)を操作するための基本的なガイドを以下に示します。これにはストアにデータを保存、取得、更新、削除するための一般的な操作が含まれます。Vuexを使用する前に、まずはVue.jsおよびVuexをプロジェクトに導入していることを確認してください。
  • ストアの作成

    • 1.src/store/index.js などに、Vuexストアを作成します。
      1. // src/store/index.js
      2. import { createStore } from 'vuex';

      3. export default createStore({
      4.   state: {
      5.     // データを保存する状態
      6.     exampleData: null,
      7.   },
      8.   mutations: {
      9.     // 状態を更新するためのミューテーション
      10.     setExampleData(state, newData) {
      11.       state.exampleData = newData;
      12.     },
      13.   },
      14.   actions: {
      15.     // ミューテーションを呼び出すためのアクション
      16.     updateExampleData({ commit }, newData) {
      17.       commit('setExampleData', newData);
      18.     },
      19.   },
      20.   getters: {
      21.     // 状態を取得するためのゲッター
      22.     getExampleData: state => state.exampleData,
      23.   },
      24. });
      复制代码
      2.Vueコンポーネントでの使用

      • コンポーネントでストアを使用するには、store オプションを使います。
        1. // src/App.vue などのコンポーネントファイル
        2. <script>
        3. export default {
        4.   methods: {
        5.     // データを更新するメソッド
        6.     updateData() {
        7.       this.$store.dispatch('updateExampleData', '新しいデータ');
        8.     },
        9.   },
        10.   computed: {
        11.     // データを取得する計算プロパティ
        12.     exampleData() {
        13.       return this.$store.getters.getExampleData;
        14.     },
        15.   },
        16. };
        17. </script>
        复制代码
        3.データの保存(Mutationを使用)

        • ストア内のデータを変更するためには、ミューテーションを使用します。
          1. // コンポーネントのメソッド内で呼び出す例
          2. this.$store.commit('setExampleData', '新しいデータ');
          复制代码

        • 4.データの取得(Getterを使用)

          • ストア内のデータを取得するためには、ゲッターを使用します。
            1. // コンポーネントの計算プロパティ内で使用する例
            2. this.$store.getters.getExampleData;
            复制代码
            5.データの更新(Actionを使用)

            • 非同期処理や複雑なロジックが必要な場合、アクションを使用してミューテーションを呼び出します。
              1. // コンポーネントのメソッド内で呼び出す例
              2. this.$store.dispatch('updateExampleData', '新しいデータ');
              复制代码
              6.データの削除

              • ミューテーションを使ってデータを初期化するか、リセットすることができます。
                1. // ミューテーションを使ってデータを初期化する例
                2. mutations: {
                3.   resetExampleData(state) {
                4.     state.exampleData = null;
                5.   },
                6. }
                7. // コンポーネントのメソッド内で呼び出す例
                8. this.$store.commit('resetExampleData');
                复制代码
                これで、基本的なストアの操作ができるようになりました。これは基本的な例であり、プロジェクトの要件に応じてより複雑なストアの設定ができます。



回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|英溯IT论坛 ( 沪ICP备13022730号-6 )

GMT+8, 2024-2-28 14:16 , Processed in 0.110628 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表