本篇博客先介绍使用方法,再介绍集成环境。
使用:
图①
如图①,Auxiliary页面想要获取index页面的数据。
在store目录的modules目录下新建layout.js文件。
layout.js代码如下:
// 状态管理: 存储用户在 布局页面中 选择的 树结构数据;
// state可以类比vue实例中的data(){return{}}
const state = {
treeData: []
}
// mutations可以类比vue实例中的methods:{}
const mutations = { // 修改setters里面的内容
// 同步
set_tree_data(state, treeData) { // 提供
// console.warn('state treeData', treeData)
state.treeData = treeData
},
clear_tree_data(state) { // 清理
state.treeData = []
}
}
// 与mutations类似;
const actions = {
// 异步, 从服务器请求回来的数据
fetchTreeData({commit}, payload) {
// 假设这是从服务器获取数据的异步操作
// 这里使用 Promise 作为示例
return new Promise((resolve, reject) => {
setTimeout(() => {
const data = payload; // 假设数据已经从服务器获取到了
commit('set_tree_data', data);
resolve(['1','2']);
}, 1000);
})
}
}
const getters = {
// 定义一个 getter 来过滤 id 等于 1 的树形数据返回
filterTreeData(state) {
return state.treeData.filter(item => item.id === 1);
}
}
export default {
namespaced: true, //为当前模块开启命名空间 (命名空间 layout)
state,
mutations,
actions,
getters
}
index页面存储数据到状态管理:
import { mapMutations } from 'vuex'
methods: {
// 使用辅助函数获取 mutation
...mapMutations('layout',['set_tree_data','clear_tree_data']),
setVuexData() {
// 调用 set_tree_data方法 存储数据到layout.js文件
this.set_tree_data(this.staticTreeData);
},
},
data(){
return{
staticTreeData:
[{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
}]
},
{
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}],
}
},
mounted:{
this.setVuexData()
}
Auxiliary页面从状态管理获取数据:
import { mapState } from 'vuex'
computed: {
// 使用辅助函数获取 state
...mapState('layout',{
treeData: state => state.treeData
}),
// 使用辅助函数获取 getters
...mapGetters('layout',['filterTreeData']),
// 使用辅助函数获取 actions
...mapActions('layout',['fetchTreeData']),
},
methods: {
// 获取存储在状态管理的treeData;
getVuexStateData(){
let stateData = this.treeData;
console.log('stateData: ', stateData);
},
getVuexGettersData(){
let gettersData = this.filterTreeData
console.log('gettersData: ', gettersData);
},
getVuexActionsData(){
let actionsData = this.fetchTreeData
console.log('actionsData: ', actionsData);
}
},
mounted: {
this.getVuexStateData()
this.getVuexGettersData()
this.getVuexActionsData()
}
如此,便介绍完使用方法。
补充getters:
在 Vuex 中,getters
类似于 Vue.js 组件中的计算属性(computed properties),但它们是在 Vuex store 的级别上定义的。getters
允许你基于 store 的状态派生出一些新的状态,这些状态通常是 store 中状态的复杂组合或经过某些处理后的结果。
getters是为了方便使用,与计算属性computed类似。随着modules下面的组件的值变化。
下面介绍集成环境:
环境集成vuex:
整体目录如图①所示。
如下图②在store目录下新建index.js文件:
图②
其中特别的,如本例中的layout组件位于modules目录下,不用再行注册。
如本例中的getters不在modules目录下,是需要注册的。
store目录下的index.js文件如下:
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set './app.js' => 'app'
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
const store = new Vuex.Store({
modules, // 包含了modules目录下的所有文件;
getters
})
export default store
main.js是程序的入口,需要在里面注册:
import Vue from 'vue'
import store from './store'
new Vue({
el: '#app',
store,
render: h => h(App)
})