Vue学习笔记-vuex的基本使用
Vuex
1、概念
在vue中实现集中式状态（数据）管理一个Vue的插件，对vue应用中多个组件的共享状态进行集中式管理(读/写)，也是一种组件间通信方式，且适用于任意组件间通信
2、搭建vuex环境
1、创建文件：src/store/index.js
// 该文件用于创建vuex中最为核心的store
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)
// 准备actions - 用于响应组件中的动作
const actions = {}
// 准备mutation - 用于操作数据（state）
const mutations = {}
// 准备state - 用于存储数据
const state = {}
// 创建store
export default new Vuex.Store({
actions,
mutations,
state,
})
// 暴露store
2、在main.js中创建vm时传入store配置项
// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 引入插件
import vueResource from 'vue-resource'
// 引入store
import store from './store/index'
// 关闭Vue的生产提示
Vue.config.productionTip = false;
//使用插件
Vue.use(vueResource)
// Vue.use(Vuex)
// 创建vm
new Vue({
el:'#app',
render:h=>h(App),
store,
beforeCreate(){
Vue.prototype.$bus = this //安装全局事件总线
}
})
vuex基本使用
1、初始化数据、配置actions、配置mutation，操作文件store.js
// 该文件用于创建vuex中最为核心的store
import Vue from 'vue'
// 引入vuex
import Vuex from 'vuex'
// 应用Vuex插件
Vue.use(Vuex)
// 准备actions - 用于响应组件中的动作
const actions = {
// jia(context,value){
// console.log('action用了',context,value)
// context.commit("JIA",value)
// // console.log(context)
// },
// jian(context,value){
// context.commit("JIAN",value)
// },
jiaOdd(context,value){
if(context.state.sum%2){
context.commit("JIA",value)
}
},
jiaWait(context,value){
setTimeout(() => {
context.commit("JIA",value)
}, 500);
}
}
// 准备mutation - 用于操作数据（state）
const mutations = {
JIA(state,value){
// console.log("mutation JIA",state,value)
state.sum += value
},
JIAN(state,value){
state.sum -= value
},
}
// 准备state - 用于存储数据
const state = {
sum:0 //当前的和
}
// 创建store
export default new Vuex.Store({
actions,
mutations,
state,
})
// 暴露store
2、组件中读取vuex中的数据：$store.state.sum
3、组件中修饰vuex中的数据：$store.dispatch('action中的方法名'，数据)或$store.commit('mutation中的方法名'，数据)
备注：若没有网络请求或其他业务逻辑，组件也可以越过action，即不写dispatch，直接写commit
getters的使用
1、概念：当state中的数据需要经过加工后在使用时，可以使用getters加工
2、在store.jsz汇总追加getters配置
.....
const getters = {
bigSum(state){
return state.sum*10
}
}
export default new Vuex.Store({
actions,
mutations,
state,
getters,
})
3、组件中读取数据：$store.getters.bigSum
四个map方法的适用
1、mapState方法：用于帮助我们映射state中的数据为计算属性
computed:{
// 借助mapState生成计算属性，从state中读取数据（对象写法）
...mapState({sum:'sum',school:'school',subject:'subject'}),
// 借助mapState生成计算属性，从state中读取数据（数组写法）
...mapState(['sum','school','subject']),
2、mapGetters方法:用于帮助我们映射getters中的数据为计算属性
computed:{
//借助mapGetters生成计算属性，从getters中读取数据（数组写法）
...mapGetters(['bigSum']),
// 借助mapGetters生成计算属性，从getters中读取数据（对象写法）
...mapGetters({bigSum:'bigSum'})
}
3、mapActions方法：用于帮助我们生成与action对话的方法，即包含$store.dispatch(xxx)的函数
// 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions（对象写法）
// ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}),
// 借助mapAction生成对应的方法，方法中会调用dispatch去联系actions（数组写法）
// ...mapActions(["jiaOdd","jiaWait"])
4、mapMutations方法:用于帮助我们生成与mutation对话的方法，即：包含$store.commit(xxx)的函数
// 借助mapMutation生成对应的方法，方法中会调用commit去联系mutation（对象写法）
// ...mapMutations({increment:'JIA',decrement:'JIAN'}),
// 借助mapMutation生成对应的方法，方法中会调用commit去联系mutation（数组写法）
//...mapMutations(["JIA","JIAN"]),