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}