这篇文章给大家分享的是有关Vuex中常用知识点有哪些的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
vuex中常用的一些知识点
一、为什么要使用Vuex
1、多个组件依赖同一个状态，使用组件之间通信方法会非常繁琐，例如多层嵌套组件。
2、需要全局保存的数据，例如用户、权限信息，全局系统设置
二、Vuex的五个核心属性
1、state：存储状态
计算
安全
数据库
网络和加速
企业服务
// store.jsconst store = new Vuex.Store({
state: {
count: 0
}});// 组件里获取count值$store.state.count2、getters：state作为第一个参数，其他getters作第二个参数，返回值会根据他的依赖缓存起来，相当于Vue的计算属性
// store.jsconst store = new Vuex.Store({
state: {
count: 1，
sum: 2
},
getters: {
getCountAndSum： (state,getters) => {
return state.count + state.sum;
}
}});// 其他组件获取getter$store.getters.getCountAndSum3、mutations：修改状态（同步的），state 作为第一个参数，提交载荷作为第二个参数
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state, obj) {
state.count += obj.n;
}
}});// 其他组件调用mutations的方法$store.commit('increment', {n: 100});4、actions：异步操作（执行mutations的方法，不是直变更状态）
const store = new Vuex.Store({
state: {
count: 1
},
mutations: {
increment (state, obj) {
state.count += obj.n;
}
},
actions: {
increment (context) {
context.commit('increment');
}
}});// 其他组件调用actions的方法$store.dispatch('increment');5、modules：store的子模块
const a = {
state: {
count: 0
},
getters: {
getCount2 (state, getters, rootState) {
return state.count + 2;
}
},
mutations: {
increment (state, getters, rootState) {
state.count++;
}
},
actions: {
increment (context) {
// context.state.count;
// context.rootState.count;
context.commit('increment');
}
}};const b = {};const store = new Vuex.Store({
modules: {
a,
b }});// 其他组件调用 （获取state的变量需要加上引入的module的别名)$store.state.a$store.state.b三、Vuex辅助函数
<template>
<div class="about">
<h2>count: <span>{{count}}</span></h2>
<h2>getCount: <span>{{$store.getters.getCount}}</span></h2>
<h2>sum: <span>{{sum}}</span></h2>
<h2>getSum: <span>{{$store.getters.getSum}}</span></h2>
<button @click="clickB">test </button>
</div></template><script>import {mapState, mapGetters, mapMutations, mapActions} from 'vuex';
export default {
name: 'about',
data () {
return {
count: 0,
sum: 0
}
},
computed: {
...mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count + this.localCount;
}
}),
...mapGetters([
'getCount', 'getSum'
])
},
mounted () {
this.count = this.$store.state.count;
this.sum = this.$store.state.a.sum;
},
methods:{
...mapMutations(
'add','addO'
),
...mapActions([
'add','addO'
]),
clickB () {
this.$store.dispatch('add');
this.$store.dispatch('addO');
}
}
}</script>感谢各位的阅读！关于“Vuex中常用知识点有哪些”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
