之前有写过vuex的基础笔记，这次来个完整的使用demo。
定义模块：
比如就来个user模块叭。
// 1.定义 user （store下面创建一个modules，这个user放在modules下。）
const user = {
state: {
userName: '张三'
},
mutations: {
setUserName: (state, updateState) => {
state.userName = updateState.userName
}
},
actions: {
setUserNameAsync: (context, updateState) => {
setTimeout(() => {
console.log('延迟执行')
context.commit('setUserName', updateState)
}, 1000)
},
axiosAction: (context, updateState) => {
console.log('context', context, 'updateState:', updateState)
const url = '/list'
this.axios.post(url, {}).then((res) => {
console.log(res)
}).catch((err) => {
console.log(err)
})
}
}
}
export default user
// 2.定义 store 计算属性，这一步主要是把state状态的数据进行一次筛选或映射，重新计算结果并提供给组件使用，调用方式为：this.$store.getters.paramsXX
const getters = {
name: state => state.user.name
}
export default getters
// 3.组装并导出模块
import Vue from 'vue'
import Vuex from 'vuex'
// 单个模块导入
import user from './modules/user'
// 批量模块导入
// 导入模块
const modulesFiles = require.context('./modules', true, /.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^./(.*).w+$/, '$1')
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
console.log('modules：', modules)
// 导入getters
import getters from './getters'
Vue.use(Vuex)
const store = new Vuex.Store({
// 这里只举例一个模块，所以这里就只导入一个模块
modules: {
user
},
getters
})
export default store
以上为整个store里干的事情。
接下来是vue内使用：
<template>
<div>
<h3>{{ name }}</h3>
<h3>{{ getUserName }}</h3>
<button @click="changeName">换名字</button>
<button @click="changeNameAsync">延迟执行换名</button>
<button @click="doHttps">接口请求</button>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
data() {
return {}
},
// 细节：
// this.$store.commit()触发>mutaions
// this.$store.dispatch()触发>actions
computed: {
// 通过计算属性返回状态
// getUserName() {
// return this.$store.getters.getUserName
// },
// 使用对象展开运算符将 getter 混入 computed, 推荐此方法
...mapGetters(['name', 'avatar', 'introduction', 'roles', 'getUserName'])
},
methods: {
changeName() {
this.$store.commit('setUserName', { userName: '李四' })
},
changeNameAsync() {
this.$store.dispatch('setUserNameAsync', { userName: '王五' })
},
axiosAction() {
this.$store.dispatch('axiosAction', { _this: this })
}
}
}
</script>