vuex通俗入门

起步

披星戴月 , 日月追逐 , 哪怕一无所获 .

根据项目结构记录

基本结构

state , getter , mutations , actions 稍后讲解 , 先有个基本结构的概念 , 能更好的梳理项目目录

• src/store/state.js
• src/store/mutations.js
• src/store/action.js
• src/store/index.js

// src/store/state.js
export default {
    
}
复制代码

// src/store/getter.js
export default {
    
}
复制代码

// src/store/mutations.js
export default {
    
}
复制代码

// src/store/action.js
export default {
    
}
复制代码

// src/store/index.js
// 导入
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getter'
import mutations from './mutations'
import actions from './action'

// use Vuex在Vue中
Vue.use(Vuex)

// 导出Vuex的store实例
export default new Vuex.store({
    state,
    getters,
    actions,
    mutations
})
复制代码

// src/main.js
// 导入store
import store from './store'

//挂载store在Vue new出实例
new Vue({
    store
}).$mount('#app')
复制代码

vuex中的state

state需写成一个对象 , 在对象里只存储 key 和 value 的数据

// state 状态 当vuex中的state发生改变 , 引用处也会同步改变
// state就是根据你项目的需求，自己定义的一个数据结构，里面可以放些通用的状态。
const state = {
    name: 'liv',
    age: 23,
    job: {
        a: '1',
        b: '2'
    }
}
// 例如上面所写的，这些状态可以在各个页面通过vuex访问。如下：
 this.name = this.$store.state.name
// 通过mutations改变state，状态不会被同步。至于mutations下面会讲到。
复制代码

vuex中的getter

// 类似于computed函数
const getters: {
    trunName: state => {
        return state.name + "-One"
    }
}
复制代码

vuex中的mutations

// 官方定义：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
// 每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。
const mutations = {
    changeName: (state, n) => {
        state.name = "nini" + n
    }
}
// 不能直接调用一个 mutation handler
// 这个选项更像是事件注册：“当触发一个类型为 increment 的 mutation 时，调用此函数。
this.store.commit('changeName', 1) //这里的1则为changeName函数里的n参数

// ===========================

// 当有复杂的数据时我们可以传入对象
const mutations = {
    changeName: (state, obj) => {
        state.name + '-' + obj.sex + '-' + obj.age
    }
}
// 调用
this.store.commit({
    type: 'changenName', // 这里为要触发的函数
    sex: 'boy',
    age: 20
})

// ===========================

// mutations也有映射辅助函数mapMutations
// 将组件中的methods映射为store.commit调用
import { mapMutations } from 'vuex'

methods: {
    ...mapMutations({
        add: 'changeName' // 映射 this.add() 为 this.$store.commit('changeName')
    })
}
// 这样我们可以在vue文件里直接调用函数：this.add()
复制代码

vuex中的actions

// 因为Mutations必须是同步函数。
// 如果我们需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了。
// Action 提交的是 mutation，而不是直接变更状态。
// Action 可以包含任意异步操作。
const actions = {
    changeName: context => {
        context.commit('changeName')
        // 对应mutations中的changeName
    }
}
// 调用
// 在vue页面里想用action , 可以分发 Action，Action 通过 store.dispatch 方法触发：
this.store.disptch('changeName')

//===============================

// 支持载荷方式和对象方式
// 载荷
this.store.dispatch('changeName', {
    count: 1
})
// 对象
this.store.dispatch({
    type: 'changenName'
})

// ====================

// 映射函数 mapActions
import { mapActions } from 'vuex'

export default {
    methods: {
        ...mapActions({
            "add": "changeName" //函数命名不同
        })
    }
}
//调用
this.add()
复制代码

额外的 Modules

如果状态很复杂很多 , 可以分割成模块

const module1 = {
    state,
    mutations,
    getters,
    actions
}

const module2 = {
    state,
    mutations,
    getters,
    actions
}

const store = new Vuex.store({
    modules: {
        m1: module1,
        m2: module2
    }
})

//调用
this.store.state.m1
this.store.state.m2
复制代码

总结起来：mutation 只管存，你给我（dispatch）我就存；action只管中间处理，处理完我就给你，你怎么存我不管（所有的改变state状态的都是mutation 来操作）；Getter 我只管取，我不改的（类似计算属性）。