Vuex的基本语法

基本结构

state 

全局状态的初始值，存储所有数据，可以用modules属性划分成若干模块

getters

根据state中的值计算新的值

mutations

所有对state的修改操作都需要定义在这里，不支持异步，可以通过store.commit()触发，也是更新状态的唯一方法-更新state的唯一方法，commmit mutations

actions

定义对state的复杂修改操作，支持异步，可以通过store.dispatch()触发。注意不能直接修改state，只能通过mutations修改state。可以异步操作，可以返回promise,更改数据还是传递到mutation去更改。

modules

定义state的子模块 

context 作用

在Vuex中，context是一个对象，它包含了当前store中的state、getters、mutations和actions，并且在actions中是第一个参数。context的作用是为了在actions中能够调用mutations和getters，同时还能够访问全局state。

具体来说，context对象有以下属性和方法：

• state：当前store中的state
• getters：当前store中的getters
• commit：用来提交mutations，例如：context.commit('mutationName')
• dispatch：用来分发actions，例如：context.dispatch('actionName')
• rootState：根store的state
• rootGetters：根store的getters

通过context对象，我们可以在actions中调用mutations和getters，并且可以在全局访问state。这样可以让我们更加方便地管理数据流，使得代码更加简洁和可维护。

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
            }

        }
    }

index.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()

                }

            })


        }



    },






}