搭建vuex环境

1.创建文件: src/store/index.js

//引入vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from "vuex'
//应用vuex插件
Vue.use(Vuex)
//准备actions对象—响应组件中用户的动作
const actions = {}
//准备mutations对象—修改state中的数据
const mutations = {}
//准备state对象—保存具体的数据
const state = {}
//当state中的数据需要经过加工后再使用时，可以使用getters加工
const getters = {
    sumAdd(state){
        return state.sum*10+1;
    }
}
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

2.在main.js中创建vm时传入store配置项

//引入store
import store from './store'
//创建vm
new Vue({
    el:'#app',
    render: h => h(App),
    store,
})

3.组件中vuex数据的读取与修改
读取：$store.state.sum
$store.getters.sumAdd
修改：$store.dispatch('action中的方法名',数据)
$store.commit( 'mutations中的方法名,数据)

4.四个map方法的使用
1.mapState方法:用于帮助我们映射state中的数据为计算属性
2.mapGetters方法:用于帮助我们映射getters中的数据为计算属性(使用方法同上)
3.mapActions方法:用于帮助我们映射actions中的数据为计算属性(使用方法同上)
4.mapMutations方法:用于帮助我们映射mutations中的数据为计算属性(使用方法同上)
mapActions与mapMutations使用时，若需要传递参数需要:在模板中绑定事件时传递好参数，否则参数是事件对象。

computed: {
    //借助mapState生成计算属性: sum、school、subject（对象写法)
    ...mapState({sum:'sum',school:'school',subject:'subject'})，
    //借助mapState生成计算属性: sum、school、subject（数组写法)
    ...mapState(['sum','school','subject']),
},
//mapGetters方法,mapActions方法,.mapMutations方法(使用方法同上)
//合并对象    a={...对象,...对象}
    b={b1:1,b2:2}
    //将对象b中的每一项合并到对象c中
    c={c1:3,...b}

おすすめ