基本構造

州

すべてのデータを保存するグローバル状態の初期値は、 module 属性を使用して複数のモジュールに分割できます。

ゲッター

状態の値に基づいて新しい値を計算します

突然変異

すべての状態変更操作はここで定義する必要があります。非同期はサポートされていません。store.commit() によってトリガーできます。また、これが状態を更新する唯一の方法です。状態を更新し、ミューテーションをコミットします。

行動

状態に対する複雑な変更操作を定義し、非同期をサポートし、store.dispatch()によってトリガーできます。状態は直接変更できず、突然変異によってのみ変更できることに注意してください。非同期で操作したり、Promise を返したり、データを変更したり、変更するためにミューテーションに渡したりすることができます。

モジュール

状態を定義するサブモジュール

コンテキストの役割

Vuex では、コンテキストは現在のストア内の状態、ゲッター、ミューテーション、およびアクションを含むオブジェクトであり、アクションの最初のパラメーターです。コンテキストの役割は、アクション内でミューテーションとゲッターを呼び出すことができると同時に、グローバル状態にアクセスできることです。

具体的には、コンテキストオブジェクトには次のプロパティとメソッドがあります。

state: 現在のストアの状態

ゲッター: 現在のストアのゲッター

commit: ミューテーションを送信するために使用されます。例: context.commit('mutationName')

dispatch: アクションを配布するために使用されます。例: context.dispatch('actionName')

rootState: ルートストアの状態

rootGetter: ルートストアのゲッター

コンテキストオブジェクトを通じて、アクション内でミューテーションとゲッターを呼び出し、グローバルに状態にアクセスできます。これにより、データフローをより便利に管理できるようになり、コードがより簡潔になり、保守しやすくなります。

ps: 一部の言語では this や self などに相当します。

vue3での簡単な使い方

    import { useStore } from 'vuex'

    export default {
        name: 'Login',


        setup() {

            const store = useStore();

            const count = store.state.number.count;

            const data = reactive({

                loginData: {
                    userName: "",
                    passWard: "",
                    passWard2: "",
                },
                num: count,
            })

            const login = () => {

                // 触发store里mutation的函数
                store.commit('setCount', 100);
                // dispatch 触发store里mutation的函数
                store.dispatch('setCountPromise', store.state.number.count).then(res => {
                    alert('修改成功');
                }).catch(err => {
                    alert(err)
                })
                // alert(store.state.count)
                console.log(store.state.number.count);
            }

            return {
                ...toRefs(data),
                login
            }

        }
    }

インデックス.js

import { createStore } from 'vuex'
import number from '../store/state/num.js'


export default createStore({


  // 数据比较多，分模块
  modules: {
    number
  }
})

num.js

export default {
    namespace: true,

    // 全局状态的初始值
    state: {
        count: 1,

    },

    // 计算state，获取对应的值
    getters: {
    },

    // 更新状态的唯一方法-更新state的唯一方法，commmit mutations
    mutations: {
        setCount(state, num) {
            state.count += num;
        }

    },

    // 可以异步操作，可以返回promise,更改数据还是传递到mutation去更改
    actions: {
        setCountPromise(context, num) {
            // context指mutations环境 ，可用this
            return new Promise((resolve, reject) => {
                if (num > 100) {
                    reject('值不能大于100')
                }
                else {
                    context.commit('setCount', num);
                    resolve()

                }

            })


        }



    },






}

Vuexの基本構文

基本構造

コンテキストの役割

vue3での簡単な使い方

おすすめ