Vuex的核心与日常用法

1.state:创建中的状态(需要共享的数据)

new Vuex.Store({
    // 需要共享的数据 ( 至少2个组件以上 使用到的 )
    state: {
        name: '嘻嘻',
        age: 18,
        sex: '女',
        hobs: ['吃饭', '睡觉', '打豆豆']
    }
})

在组件中获取仓库的共享数据,通过: this.$store.state.对应的字段 就可以获取 ( this.$store代表仓库的实例对象 )

computed: {
    // 计算属性函数名 就代表函数的返回结果 用起来方便 只要计算的过程发生改变 自动重新计算
    hobs() {
        return this.$store.state.hobs
    }
}

//高级方式:  通过辅助函数:  `mapState` 获取
computed: {
    // map: 映射 一一对应. mapSate就是: 和 仓库的state一一对应
    ...mapState(['name', 'age']),
        
    ...mapState({
        gender: 'sex', // sex和仓库对应
        hobs: (state) => state.hobs  // 
    })
}

2.mutations:更改 Vuex 的 store 中的状态的唯一方法是(commit)提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

 mutations: { // 变化 们  一个mutation就是一个变化
        // 改名字
        SET_NAME (state) {
            state.name = '新的名字'
        },
        // 改年龄
        SET_AGE (state, newAge) {
            state.age = newAge
        },
      }

更改仓库状态的唯一方式是提交mutation, 本质是: 触发mutations中对应的函数,提交mutation(触发对应函数), this.$store.commit()

methods: {
    changeName() {
        // 修改仓库中的名字
        this.$store.commit('SET_NAME')
    },
    changeAge() {
        // 修改仓库中的年龄
        this.$store.commit('SET_AGE', 20)
    },
    changeSex() {
        // 修改仓库中的商品名称
        this.$store.commit({
            type: 'SET_SEX', // 事件类型
            sex: '女',
            age: 10
        })
    }
}

//高级写法
methods: {
    // mapMutations就是: 和 仓库的muations一一对应
    ...mapMutations(['SET_HOBS'])
    
     ...mapMutations({
         changeHobs: 'SET_HOBS'
     })
}

3.actions:Action 类似于 mutation,Action 提交的是 mutation，而不是直接变更状态,Action 可以包含任意异步操作

 actions: {
        // 修改名字函数
        SET_NAME(context) {  // context 等同于 this.$store 仓库的实例对象
            // 写异步代码
            setTimeout(() => {
                // 修改俊兰的名字
                context.commit('SET_NAME')
            }, 5000)
        }
    },

在组件中, 如何触发 actions 中的函数

methods: {
    changeNameAsync() {
        // 异步修改
        this.$store.dispatch('SET_NAME', 实参) // 异步修改
        
        this.$store.dispatch({
            type: 'SET_NAME'  // 和 actions中名字 对上
            参数名: 参数值
        }) 
    }
    //高级写法
    ...mapActions(['SET_NAME']),
    ...mapActions({
        setName: 'SET_NAME'
    }),
}

基本工作中常用的就是这三个,其实不难,主要是记住用法,多使用几遍几好了,完结!