Vuex备忘录

「这是我参与2022首次更文挑战的第28天，活动详情查看：2022首次更文挑战」。

备忘录嘛！直接开始

vuex文件在项目中位置，以及在哪儿导入

vuex的四大属性，state,mutations,actions,getters

state

存放初始值，这里面的数据不能直接修改，但是能被直接访问

组件中访问state的两种方式

//vuex文件中代码
    state: {
        name: 'Starqin',
        age: 20
    }

//组件中代码
//访问方式二，导入vuex的扩展函数
import {mapState} from 'vuex'
export default {
    computed:{
        //方式一，直接访问
        this.$store.state.name
        //方式二，扩展函数访问，这里需要导入Vuex的扩展函数
        ...mapState(['name','age'])
    }
}

mutations修改state中的数据，这个属性中存放函数

//vuex中的代码
    //书写初始化的公共数据
    state: {
        name: 'Starqin',
        age: 20
    },

    //书写对state中数据修改的函数
    mutations: {
        //state是必须要的参数，payload是用户传过来的参数，一般是对象形式
        setAge(state, payload) {
            //修改时需要使用state.语法
            state.age = payload.num
        },
        setName(state, payload) {
            state.name = payload.name
        }
    }

访问mutations中函数的两种方法

//组件中代码
//访问方式二，导入vuex的扩展函数
import {mapState，mapMutations} from 'vuex'
export default {
    computed:{
        //方式一，直接访问
        this.$store.state.name
        //方式二，扩展函数访问，这里需要导入Vuex的扩展函数
        ...mapState(['name','age'])
    },
    methods:{
           //访问方式二解构，mapMutations的解构必须在methods中完成
        ...mapMutations(['setName'])
    },
    //操作vuex中的数据要在mounted中完成
    mounted(){
        //方法一、直接访问
        this.$store.commit('setName',{name:"W-js"})
        //方法二、扩展函数访问
        this.setName({name:"W-js"})
    }
}

注意：组件中调用vuex mutations属性中函数，必须在mounted中调用，解构必须在methods中完成

actions用来处理异步修改state中的数据

//vuex中的代码
    //书写初始化的公共数据
    state: {
        name: 'Starqin',
        age: 20
    },
    //书写对state中数据修改的函数
    mutations: {
        setAge(state, payload) {
            state.age = payload.num
        },
        setName(state, payload) {
            state.name = payload.name
        }
    },

    //书写对state中数据修改涉及异步的函数
    actions: {
        //content是必须要填写的参数，等同于复制了一份state
        setName(content) {
            setTimeout(() => {
                //             setName必须是mutations中有的函数
                content.commit('setName', { name: 'W-js' })
            }, 1000)
        },
        setUName(content) {
            setTimeout(() => {
                content.commit('setName', { name: payload.name })
            }, 1000)
        }
    },

组件中访问actions中的函数

//组件中代码
    //访问方式二，导入vuex的扩展函数
    import {mapActions} from 'vuex'
    export default {
  
    methods:{
           //访问方式二解构，mapActions的解构必须在methods中完成
        ...mapActions(['setName'])
    },
    //操作vuex中的数据要在mounted中完成
    mounted(){
        //方法一、直接访问
        this.$store.dispatch('setName',{name:"W-js"})
        //方法二、扩展函数访问
        this.setName({name:"W-js"})
    }
}

注意：组件中调用vuex actions属性中函数，必须在mounted中调用，解构必须在methods中完成，actions中修改提交的函数(commit)中的第一个参数，是mutations中函数

getters 依赖state中的数据生成一个全新的数据

getters非常类似于vue中的computed属性

//vuex中的数据
    //书写初始化的公共数据
    state: {
        name: 'Starqin',
        age: 20
    },
    getters: {
        //后面组件可以直接在computed属性中访问这个函数名
        loveYou(state) {
            return state.name + 'love me'
        }
    }

//组件中的代码
    import {mapGetters} from 'vuex'
    export default {
    //读取vuex中的数据在computed中完成
    computed:{
         //方法一、直接访问
         loveYou(){
            return this.$store.getters.loveYou
        },
        //方法二、扩展函数访问
        ...mapGetters(['loveYou'])
    }

总结：

1. state和getters中的数据在组件中computed属性里访问
2. getters中的数据可以生成依赖于state中数据的一个全新的值，不会修改state中的值
3. mutations,actions中的函数，需要在组件的mounted中访问执行，如果需要使用扩展函数，就必须先在methods中解构，然后再在mounted中访问执行
4. actions中异步修改数据时会调用content.commit函数，commit函数的参数是mutations中的函数，这样的步骤我称为提交给mutations处理
5. 在组件中使用直接访问mutations中函数时，使用commit，直接访问actions中函数时使用dispatch

vuex 与 vue.mixins的区别

最大区别：

1. mixins中的变量，函数，每一个组件都可以访问，但是每一组件访问后的组件中mixins变量和函数，就是独立于该组件存在的

2. vuex中的数据是共享的，每一个组件都可以访问，而且正真实现了，一处修改，全部修改的效果 如图：