1.index.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
isCollapse: false // 1,定义全局state
},
getters: { // 2, 实时监听state值的变化(最新状态)
isShow(state) { // 方法名随意,主要是来承载变化的showFooter的值
console.log('state', state)
return state.isCollapse
}
},
actions: {
},
// modules: {
// }
mutations // 改变state,mutations也是一个对象,这个对象里面可以放改变state的初始值的方法
})
2,mutation.js
- 2.1,风格一
export default {
/**
* Mutation 必须是同步函数
* 我们在项目中最常用的就是mutation.js里面的方法了。因为更改vuex中的store里的state的唯一的方式就是提交mutation
* 在vuex中,每个mutation都有一个字符串的事件类型(mutation-type)和一个回调函数(handler)
*/
3,自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象)
changeCollapse(state, payload) {
console.log('payload', payload)
state.isCollapse = payload
}
}
- 2.2:风格二
// 1,新建mutation-type.js,内容如下:
export default {
IS_COLLAPSE: 'IS_COLLAPSE' // 定义一个全局的type
}
// 2.mutation.js引入这个types文件
import * as types from './mutation-types';
export default {
[TYPES.IS_COLLAPSE] (state, payload) {
state.isCollapse = payload
}
}
3,在页面里面使用这个全局的state
// 某个vue文件改变这个全局的state
import { mapState } from 'vuex'
export default {
computed: {
...mapState({
isCollapse: state => state.isCollapse
})
},
/**
* 可以在组件中使用 this.$store.commit('xxx') 提交 mutation,
* 或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用
*/
methods: {
toggleShow() {
this.$store.commit('changeCollapse', !this.isCollapse)
// 或者 this.$store.commit('IS_COLLAPSE', !this.isCollapse)
}
}
}
</script>
4,如果使用 mapMutations,步骤3里面的代码可以改成下面这样,mapMutations传参是在html里面写的
<div @click="toggleShow(!isCollapse)">
import { mapState, mapMutations } from 'vuex'
computed: {
...mapState({
isCollapse: state => state.isCollapse
})
},
methods: {
...mapMutations({
// toggleShow: 'changeCollapse'
toggleShow: 'IS_COLLAPSE'
}),
}