State
Getter
Mutation
Action
Module
定义共享的状态变量,相当于store中的data
通过mapState方法映射到computed中
读取器,相当于store中的computed属性
通过mapGetter方法映射到computed中
修改器,用于修改state中的变量状态
向store发出调用通知,用于提交mutation,相当于store中的methods
通过mapActions方法映射到methods中
action函数接收一个与store实例具有相同方法和属性的context对象,因此可以使用context.commit提交一个mutations
将 store 分割成模块(module)
1.state.js
export default {
companyInfo: [
{
id: 1,
name: '选项1',
status: true
},
{
id: 2,
name: '选项2',
status: false
},
{
id: 3,
name: '选项3',
status: true
},
{
id: 4,
name: '选项4',
status: true
},
{
id: 5,
name: '选项5',
status: false
},
{
id: 6,
name: '选项6',
status: true
}
],
helloWord: 'Hello Word!'
};
2.getters.js
export default {
values: state => Object.values(state.companyInfo)
};
3.mutation-types.js
// 使用常量替代 Mutation 事件类型
// 名字可以自己定,建议使用与action方法名一致的名字,这样在多人开发的方便查看
export const CHANGE_DATA = 'change_data';
4.mutations.js
// 按 es6 的规范 import * as obj from "xxx" 会将 "xxx" 中所有 export 导出的内容组合成一个对象返回
import * as types from './mutation-types';
export default {
getCompanyInfoId (state, data) {
state.companyInfo.router = 'www.baidu.com' + data;
},
[types.CHANGE_DATA] (state, data) {
state.helloWord = data;
}
};
5.actions.js
import * as types from './mutation-types.js';
export default {
// 此处使用了ES6函数参数的解构,在需要多次提交mutations时
// 不用使用context.commit来提交,而是直接使用commit提交
getMutation ({ commit }) {
commit({
type: 'getCompanyInfoId',
amount: 10
});
},
changeData ({ commit }) {
commit(types.CHANGE_DATA, 'data change success');
}
};
6.index.js 将state.js、getters.js、mutations.js、actions.js文件进行整合,作为store的出口
import Vue from 'vue';
import Vuex from 'vuex';
import List from './List';
Vue.use(Vuex);
let Store = new Vuex.Store({
modules: {
List
}
});
export default Store;
7.home.vue
<template>
template>
<script>
import { mapState, mapGetters, mapActions } from 'vuex';
export default {
data () {
return {
};
},
computed: {
...mapState({
List: state => state.List.companyInfo,
helloWord: state => state.List.helloWord
}),
...mapGetters(['values'])
},
methods: {
...mapActions(['changeData']),
},
created () {
this.changeData();
};
script>
<style scoped lang="scss">
style>