通过\n实现alert显示内容换行,\n在js中表示换行。
例如：
<script>alert('aaaa\ndbbb');//显示alert内容，显示后就是aaaa和dbbb在两行上
</script>
getters
getters是store中全新的配置项，不是必须的配置项。
getters是store的计算属性，对state里面的数据进行加工。相当于computed，会根据它的依赖被缓存起来，只有当依赖值发生变化时才重新计算。
使用方法：直接在store配置文件index.js中添加getters对象，在对象里面配置相关方法，方法里面是一个返回值，和computed的使用方法一样。
getters对象里面的方法的入参是state，可通过state获取需要加工的数据。靠返回值来决定自己的值。
步骤：index.js中配置和使用->组件使用（$store.getters.方法名）
store配置文件index.js
//?该文件用于创建Vuex中最为核心的store//?引入Vueimport?Vue?from?'vue'//?引入Vueximport?Vuex?from?'vuex'//?引入持久化存储插件import?persistedstate?from?'vuex-persistedstate'//?使用VuexVue.use(Vuex)//?准备actions-用于响应组件中的动作const?actions?=?{//?功能2-第二步。判断当前是否为A班级，如果不是再使用commit调用mutations里面的方法。getChange(context,value){if(context.state.className?!==?'A班级'){context.commit('getChangeAfter',value)}else{alert('当前是A班级，不能修改！');}}}//?准备mutations-用于操作数据（state）const?mutations?=?{//?功能1-第二步。直接调用方法。getNameCommit(state,value){console.log(state,value);state.className?=?value;},//?功能2-第三步。如果不是A班级，则调用该方法。getChangeAfter(state,value){state.className?=?value;}}//?准备state-用于存储数据const?state?=?{className:?'',studentName:?''}//?准备getters-对state进行加工处理const?getters?=?{allName(state){return?state.className?+?'999';}}//?创建并暴露storeexport?default?new?Vuex.Store({actions,mutations,state,//?配置gettersgetters,//?使用持久化插件plugins:[persistedstate({storage:?window.sessionStorage,reducer(state){return{//?只存储state中的classNameclassName:state.className}}})]})组件使用：
<!--?组件使用getters?--><span>{{$store.getters.allName}}</span>Vuex中map方法的使用mapState在组件中读取state中的数据：
...<span>这是学校里面班级的信息，这里是{{$store.state.className?||?'--'}}班</span><span>学校名为：{{$store.state.schoolName?||?'--'}}</span><!--?使用getters?--><span>{{$store.getters.allName?||?'100'}}</span>...通过观察可以发现，$store.state的重复率很高，但又不得不这样取值。所以，vuex就有一个mapState来映射state里面的数据为计算属性，我们直接使用计算属性就行。
store配置文件index.js里面state：
...//?准备state-用于存储数据const?state?=?{className:?'',studentName:?''}...export?default?new?Vuex.Store({...state,...})步骤：组件中导入mapState->在计算属性中配置mapState->页面直接使用计算属性值
导入：
import?{mapState}?from?'vuex'计算属性中配置mapState：
这里有两种配置：
1.组件里面计算属性名和state里面对应的变量名不一样时采用对象写法。
2.组件里面计算属性名和state里面对应的变量名一样时采用数组写法。
对象写法：
...<span>这是学校里面班级的信息，这里是{{classNameObj?||?'--'}}班</span><span>学校名为：{{schoolNameObj?||?'--'}}</span>...import?{?mapState?}?from?'vuex'...computed:{//?mapState函数返回为一个对象，mapState({计算属性名，组件使用:'state中对应的变量名'})...mapState({classNameObj:'className',schoolNameObj:'schoolName'})}...数组写法:
...<span>这是学校里面班级的信息，这里是{{className?||?'--'}}班</span><span>学校名为：{{schoolName?||?'--'}}</span>...import?{?mapState?}?from?'vuex'...computed:{//?mapState函数返回为一个对象，mapState(['计算属性名（state中对象变量名）'])...mapState(['className','schoolName'])}...mapGetters与mapState类似，也是两种写法：
步骤：组件中导入mapGetters->在计算属性中配置mapGetters->页面直接使用计算属性值
store配置文件index.js里面getters：
...//?准备getters-对state进行加工处理const?getters?=?{allName(state){return?state.className?+?'999';}}...export?default?new?Vuex.Store({...//?配置gettersgetters,...})这里有两种配置：
1.组件里面计算属性名和getters里面对应的计算属性名不一样时采用对象写法。
2.组件里面计算属性名和getters里面对应的计算属性名一样时采用数组写法。
对象写法：
...<span>{{allNameObj?||?'100'}}</span>...import?{?mapGetters?}?from?'vuex'...computed:{//?mapGetters函数返回为一个对象，mapGetters({计算属性名，组件使用:'getters中对应的计算属性名'})...mapGetters({allNameObj:'allName'})}...数组写法:
...<span>{{allName?||?'100'}}</span>...import?{?mapGetters?}?from?'vuex'...computed:{//?mapGetters函数返回为一个对象，mapGetters(['计算属性名（getters中对应的计算属性名）'])...mapGetters(['allName'])}...mapActions用于帮助生成与actions对话的方法，即：包含$store.dispatch()的函数。
若需要传递参数，需要在模板中绑定事件时传递好参数，否则参数是事件对象。
组件里面通过dispatch触发actions里面的方法：
<!--?组件使用getters?--><span>{{$store.getters.allName}}</span>0可以发现，也要重复this.$store.dispatch代码，所以有个mapActions映射。通过mapActions生成对应的方法，方法中会调用dispatch去联系actions。
步骤：组件中导入mapActions->在方法中配置mapActions
store配置文件index.js里面actions：
<!--?组件使用getters?--><span>{{$store.getters.allName}}</span>1这里有两种配置：
1.组件里面方法名和actions里面对应的方法名不一样时采用对象写法。
2.组件里面方法名和actions里面对应的方法名一样时采用数组写法。
对象写法：
<!--?组件使用getters?--><span>{{$store.getters.allName}}</span>2数组写法:
<!--?组件使用getters?--><span>{{$store.getters.allName}}</span>3mapMutations用于帮助生成与mutations对话的方法，即：包含$store.commit()的函数。
若需要传递参数，需要在模板中绑定事件时传递好参数，否则参数是事件对象。
组件里面通过commit触发mutations里面的方法：
<!--?组件使用getters?--><span>{{$store.getters.allName}}</span>4同理：mapMutations与mapActions类似。
通过mapMutations生成对应的方法，方法中会调用commit去联系mutations。
步骤：组件中导入mapMutations->在方法中配置mapMutations
store配置文件index.js里面actions：
<!--?组件使用getters?--><span>{{$store.getters.allName}}</span>5这里有两种配置：
1.组件里面方法名和mutations里面对应的方法名不一样时采用对象写法。
2.组件里面方法名和mutations里面对应的方法名一样时采用数组写法。
对象写法：
<!--?组件使用getters?--><span>{{$store.getters.allName}}</span>6数组写法:
<!--?组件使用getters?--><span>{{$store.getters.allName}}</span>7本文来自作者[邻家嘉良]投稿，不代表溟宇号立场，如若转载，请注明出处：https://www.gumingyu.com/changshi/202508-18111.html
评论列表（3条）
我是溟宇号的签约作者“邻家嘉良”
本文概览：通过\n实现alert显示内容换行,\n在js中表示换行。例如：<script>alert('aaaa\ndbbb');//显示alert内容，显示后就是aaaa和...
文章不错《javascript的alert怎样用<br>实现换行》内容很有帮助