搭建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}   

上一篇:android 恶意文件下载 39款


下一篇:39、Android--ButterKnife