vue——vuex在vue-element-admin项⽬中的简单应⽤
项⽬需求是：如图，点击左侧el-tree的节点，在点击右侧新建⽤户时，把点击的节点的部门名称赋值给表单中的部门机构项，同时点击节点时，表格⾃动刷新，显⽰该部门下的数据。
原本打算⽤全局变量来进⾏这个赋值，同时⽤watch监听这个变量的变化，调⽤刷新函数，但是组长说最好⽤vuex来完成，于是就打算尝试⼀下啦。
⾸先看⼀下项⽬中与vuex有关的⽬录：
vue element admin
1、modules⽂件夹中存放的是各个模块的状态，因此我们可以新建⼀个account.js来存放该页⾯的状态。
const account ={
state:{//state⽤来存放状态
group_id:''//要监听的状态
},
mutations:{//mutations⽤来修改状态，mutations中存放的都是修改状态的⽅法
SET_GROUPID:(state, group_id)=>{//改变状态的唯⼀途径就是提交（commit）mutations来修改
}
},
actions:{}
}
export default account
2、getters相当于computed计算属性，他会缓存返回值，只有当状态发⽣变化是才会重新计算。可以⽤于监听state中状态的变化并返回计算后的结果。我的项⽬中暂时未涉及到计算，因此只是简单的返回变化后的状态。
const getters ={
group_id: state => up_id
}
export default getters
在vue-element-admin项⽬中很多东西都是提前配置好的，因此我们在index.js⽂件⾥不需要再写其他东西了，到这⼀步就可以直接在页⾯中使⽤了，但是还是看⼀下index.js的结构吧。
import Vue from'vue'
import Vuex from'vuex'
import getters from'./getters'
Vue.use(Vuex)
const modulesFiles = t('./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 = place(/^\.\/(.*)\.\w+$/,'$1')
const value =modulesFiles(modulePath)
modules[moduleName]= value.default
return modules
},{})
//定义store并注册modules,getters
const store =new Vuex.Store({
modules,
getters
})
export default store
3、接下来就可以在页⾯中愉快的调⽤状态啦。
<script>
//省略⼀些没必要的东西啦
//⾸先在computed中引⼊这个状态
computed:{
groupid(){
return this.$store.up_id
}
}
//然后可以再watch中监听这状态的变化，如果点击其他节点，会⾃动刷新右边表格
watch:{
groupid(newVal,oldVal){
if(newVal){
//具体刷新内容酌情修改
up_id = newVal //接⼝的查询条件变化
}
}
}
methods:{
getList(){//我调⽤接⼝的函数 },
//点击节点调⽤的函数
handleNodeClick(data){
//提交（commit）mutations修改store中存放的groupid的值
this.$storemit('SET_GROUPID',data.id)
},
createDialog(){
}
}
</script>
这⾥有⼀个很奇怪的问题⼀直不太能理解，在resetTemp()⽅法中重置表单数据时：
method:{
resetTemp(){
//直接给空值，虽然能给部门赋值，但是如果点击下拉框选择其他部门，刚选择完毕时，值不会发⽣变化
//但是如果在修改其他表单数据，⽐如填写⼀下姓名或任何其他内容，这⾥的部门机构选项会变化为刚刚选择的内容p ={}
//但是这样就可以直接修改了

group_id:''
}
}
}
希望有⼤佬看到这个问题的话可以帮我解答⼀下！感激不尽！
☆前端新⼿记录⼀下⾃⼰学习的过程，如有问题望⼤神指出！☆

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。