一、vuex
它有以下几个核心部分组成:
1. state:存储数据;
2. mutations:更新数据的方法;
3. actions:调用mutations方法,更新state数据;
4. getters:对state中的数据进行预处理;
5. Module: store 分割成模块
创建目录
./sotre/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((itemModules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
const value = modulesFiles(modulePath)
itemModules[moduleName] = value.default
return itemModules
}, {})
const store = new Vuex.Store({
modules,
})
export default store
./sotre/modules/Acl.js
const state = () => ({
admin: false,
role: ['role'],
ability: ['ability'],
})
const getters = {
admin: (state) => state.admin,
role: (state) => state.role,
ability: (state) => state.ability,
}
// mutations是更改state的唯一方法 推荐,不建议直接修改state的值,
// 通过mutation更改state的值,vue可以监听到,页面立即响应,直接更改state vue监听不到,页面无法更新
const mutations = {
setFull(state, admin) {
state.admin = admin
},
setRole(state, role) {
state.role = role
},
setAbility(state, ability) {
state.ability = ability
},
}
// 在action中发送请求,
// 用commit触发mutions的方法
const actions = {
setFull({ commit }, admin) {
commit('setFull', admin)
},
setRole({ commit }, role) {
commit('setRole', role)
},
setAbility({ commit }, ability) {
commit('setAbility', ability)
},
}
export default { namespaced: true, state, getters, mutations, actions }
state的使用
<template>
<div class="demo">
<fieldset>
<legend>State</legend>
<div>
<div> 直接拿state的数据</div>
<div>
admin : {{this.$store.state.Acl.admin}}
</div>
<div>
ability : {{this.$store.state.Acl.ability}}
</div>
<div>
role : {{this.$store.state.Acl.role}}
</div>
</div>
<div>
<div> 使用mapState拿state的数据</div>
<div>
admin : {{this.Acl.admin}}
</div>
<div>
ability : {{this.Acl.ability}}
</div>
<div>
role : {{this.Acl.role}}
</div>
</div>
</fieldset>
</div>
</template>
<script>
import { mapState } from "vuex";
export default {
created () {
},
computed: {
...mapState(["Acl"]),
// 传对象修改传入名称
// ...mapState({
// acl:'Acl',
// }),
// 开启命名空间的写法 推荐
// ...mapState('Acl',['admin', 'ability', 'role']),
},
methods: {
},
mounted () {
},
};
</script>
<style scoped>
.demo {
border: 1px solid black;
}
</style>
getters的使用
<template>
<div class="demo">
<fieldset>
<legend>Getter</legend>
<div>
<div> 直接拿getter的数据</div>
<div>
admin : {{this.$store.getters['Acl/admin']}}
</div>
<div>
ability : {{this.$store.getters['Acl/ability']}}
</div>
<div>
role : {{this.$store.getters['Acl/role']}}
</div>
</div>
<div>
<div> 使用mapGetter拿getter的数据</div>
<div>
admin : {{this['Acl/admin']}}
</div>
<div>
ability : {{this['Acl/ability']}}
</div>
<div>
role : {{this['Acl/role']}}
</div>
</div>
</fieldset>
</div>
</template>
<script>
import { mapState, mapGetters } from "vuex";
export default {
created () {
},
computed: {
...mapGetters(['Acl/admin', 'Acl/ability', 'Acl/role']),
// 传对象修改传入名称
// ...mapGetters({
// admin:'Acl/admin',
// ability:'Acl/ability',
// role:'Acl/role',
// }),
// 开启命名空间的写法 推荐
// ...mapGetters('Acl', ['admin', 'ability', 'role']),
},
methods: {
},
mounted () {
},
};
</script>
<style scoped>
.demo {
border: 1px solid black;
}
</style>
Mutations
<template>
<div class="demo">
<fieldset>
<legend>Mutations</legend>
<div @click='MutationsClick'>
Mutations更改state的值
点击触发Mutations
</div>
</fieldset>
</div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
created () {
},
computed: {
// 传对象修改传入名称
...mapState({
acl: 'Acl',
}),
},
methods: {
// ...mapMutations(['Acl/setFull','Acl/setRole','Acl/setAbility']),
// 传对象修改传入名称
// ...mapMutations({
// acl: 'Acl',
// }),
// 开启命名空间的写法 推荐
...mapMutations('Acl', ['setFull', 'setRole', 'setAbility']),
MutationsClick () {
window.console.log('acl', JSON.parse(JSON.stringify(this.acl)));//state中的属性和值
this.setFull(true);// 修改admin为true
this.setRole([1, 2, 3]);// 修改role为[1,2,3]
this.setAbility([4, 5, 6]);// 修改ability为[4, 5, 6]
window.console.log('acl', this.acl);// 查看修改后state中的属性和值
}
},
mounted () {
},
};
</script>
<style scoped>
.demo {
border: 1px solid black;
}
</style>
Actions
<template>
<div class="demo">
<fieldset>
<legend>Actions</legend>
<div @click='ActionsClick'>
Actions更改state的值
点击触发Actions
</div>
</fieldset>
</div>
</template>
<script>
import { mapState, mapActions } from "vuex";
export default {
created () {
},
computed: {
// 传对象修改传入名称
...mapState({
acl: 'Acl',
}),
},
methods: {
// ...mapActions(['Acl/setFull','Acl/setRole','Acl/setAbility']),
// 传对象修改传入名称
// ...mapActions({
// acl: 'Acl',
// }),
// 开启命名空间的写法 推荐
...mapActions('Acl', ['setFull', 'setRole', 'setAbility']),
ActionsClick () {
window.console.log('acl', JSON.parse(JSON.stringify(this.acl)));//state中的属性和值
this.setFull(true);// 修改admin为true
this.setRole([11, 22, 33]);// 修改role为[11, 22, 33]
this.setAbility([44, 55, 66]);// 修改ability为[44, 55, 66]
window.console.log('acl', this.acl);// 查看修改后state中的属性和值
}
},
mounted () {
},
};
</script>
<style scoped>
.demo {
border: 1px solid black;
}
</style>
注意点
因为vuex是在缓存中的,所以页面刷新数据会丢失。
解决方法,把请求到的数据放入vuex中时,同时放入localStrong中。在用户刷新页面时,获取lcoalStrong中的信息,存入vuex中。