vuex模塊輔助函數(shù)
創(chuàng)建modules文件下的modA.js文件，?模塊的局部狀態(tài)如下
const state=()=>({
? ? modaStr:'我是模塊A的數(shù)據(jù)'
? })
const getters={
? strGetter(state){
? ? return state.modaStr+'getter'
? }
? }
const mutations={
? CHANGESTRA(state,payload){
? ? state.modaStr=payload
? }
? }
const actions={
? waitStr({commit},data){
? ? setTimeout(() => {
? ? ? commit('CHANGESTRA',data)
? ? }, 1500);
? }
? }
? export default{
? ? namespaced:true,
? ? state,
? ? getters,
? ? mutations,
? ? actions
? }
?computed:{
? ? /* 最簡(jiǎn)單的使用數(shù)組的方式獲取State屬性 */
? ? ...mapState('modA',['modaStr']),
? ? /* 和data數(shù)據(jù)名重復(fù)改名 */
? ? /* 第一種 */
? ? ...mapState({
? ? ? a:state=>state.modA.modaStr,
? ? }),
? ? /* 第二種 */
? ? ...mapState('modA',{a:state=>state.modaStr}),
? ? ?/* 最簡(jiǎn)單的使用數(shù)組的方式獲取Getters屬性 */
? ? ...mapGetters('modA',['strGetter'])
? ? /* 使用對(duì)象的方式獲取Getters屬性 */
? ? ...mapGetters('modA',{strA:'strGetter'})
? },
? methods:{
? ? /* 使用數(shù)組的方式獲取Mutations里面的方法 */
? ? ...mapMutations('modA',['CHANGESTRA']),
? ? /* 另一種數(shù)組方式的寫(xiě)法 */
? ? ...mapMutations([
? ? ? 'modA/CHANGESTRA', //->this['modA/CHANGESTRA']()
? ? ? ]),
? ? /* 使用對(duì)象的方式獲取Mutations方法 */
? ? ? ...mapMutations('modA',{
? ? ? ? fn1:'CHANGESTRA'
? ? ? ? }),
changemoda(){
? ? ? /* this.$store.commit('modA/CHANGESTRA','后來(lái)的我們都到了18k') */
? ? ? /* this.CHANGESTRA('后來(lái)的我們都到了18k') */
? ? ? /* this['modA/CHANGESTRA']('好好學(xué)') */
? ? ? this.fn1('后來(lái)的我們都到了18k')
? ? },
? ?/* 使用數(shù)組的方式獲取Actions里面的方法 */
? ? ...mapActions('modA',['waitStr']),
? ? /* 數(shù)組的方式第二種寫(xiě)法 */
? ? ...mapActions([
? ? ? 'modA/waitStr'
? ? ]),
? ? /* 使用對(duì)象的方式獲取Actions方法 */
? ? ...mapActions('modA',{
? ? ? fn2:'waitStr'
? ? })
? ?waitChange(){
? ? ? /* this.$store.dispatch('modA/waitStr','異步處理完成') */
? ? ? this.waitStr('異步處理完成')
? ? ? this['modA/waitStr']('異步處理完成')
? ? ? this.fn2('異步處理完成')
? ? },
? }
混入
局部混入
/* 把公共的內(nèi)容放在mixinsA.js文件中 */
export default{
? ? data(){
? ? ? ? return{
? ? ? ? ? ? msg:'vue初始化完畢'
? ? ? ? }
? ? },
? ? created() {
? ? ? ? console.log(this.msg);
? ? },
? ? methods: {
? ? ? ? fn(){
? ? ? ? ? ? alert(this.msg)
? ? ? ? ? ? console.log('mixins ``');
? ? ? ? }
? ? },
APP頁(yè)面導(dǎo)入局部
import mixinsA from '@/mixins/mixinsA'
export default {
? name:'App',
? /* 混入對(duì)象的鉤子將在組件自身鉤子之前調(diào)用 */
? mixins:[mixinsA],
? methods:{
? ? /* 數(shù)據(jù)對(duì)象在內(nèi)部會(huì)進(jìn)行遞歸合并，并在發(fā)生沖突時(shí)以組件數(shù)據(jù)優(yōu)先 */
? ? fn(){
? ? ? alert('app init')
? ? }
? }
}
全局混入纤怒，慎用
Vue.mixin({
? created:function(){
? ? console.log('全局init..');
? }
})
/* 用了全局混入會(huì)執(zhí)行4遍，因?yàn)榧虞d的時(shí)候會(huì)執(zhí)行一遍main.js里面全局混入的內(nèi)容天通，有三個(gè)頁(yè)面需要使用泊窘，三個(gè)vue頁(yè)面分別執(zhí)行一遍 */
