Vuex 快速入门

安装

npm i vuex --save

// main.js
import vuex from 'Vuex'
Vue.use(vuex)
const store = new Vuex.store({
    // ...
})
...

state

可以理解为vue文件里面的data

Vue.use(vuex)
const store = new Vuex.store({
    state:{
        name:'tyj',
        psd:'123',
        stus:[
            {age:20,name:'aaa'}
        ]
    }
})
// 访问
{{$store.state.name}}

Getters

可以对state的数据进行过滤，计算啥的

// 类似于vue中的计算属性
getters:{
    // 计算学生的年纪和
    stusAgeCount:(state => {
        let age = 0 
        state.stus.forEach(item => age += item.age)
        return age
    })
}
// 访问
import {mapGetter} from 'vuex'
computed:{
    ...mapGetter(['stusAgeCount'])
}
{{stusAgeCount}} 相当于在data 里面有了个 stusAgeCount

Mutations 设置数据

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

mutations:{
    CHANGE_PSD(state,newValue){
        state.psd = newValue
    }
}
// 使用
methods:{
    ...mapMutation({CHANGE_PSD}),
    this.CHANGE_PSD('abc123')
}
或者
this.$store.commit('CHANGE_PSD','abc123')

我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化

actions

changePsd({commit,state} , newPsd){
    if(state.psd !== newPsd){
        commit(CHANGE_PSD,newPsd)
    }else{
        console.log('密码重复！')
    }
}
// 调用
methods:{
    ...mapActions(['changePsd'])
    this.changePsd('123456aaa')
}
// 或者
this.$store.dispath('changePsd','1111000aaa')

Action 提交的是 mutation，而不是直接变更状态。 Action 可以包含任意异步操作。

Module 模块

当项目特别庞大时，state就会臃肿,vuex允许我们将store切割成模块，每个单独的模块拥有自己的 getter mutations actions 甚至 module 里面套module

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态