其他分享
首页 > 其他分享> > ebook项目

ebook项目

作者：互联网

vuex

<div class="title-wrapper" v-show="menuVisible">
</div>

store文件里面
book.js

const book = {
  state: {
    fileName: '',
    menuVisible: false
    },
    mutations: {
      'SET_FILENAME': (state, fileName) => {
        state.fileName = fileName
      },
      'SET_MENUVISIBLE': (state, menuVisible) => {
        state.menuVisible = menuVisible
      }
    },
    actions: {
        setFileName: ({ commit }, fileName) => {
          return commit('SET_FILENAME', fileName)
        },
        setMenuVisible: ({ commit }, menuVisible) => {
          return commit('SET_MENUVISIBLE', menuVisible)
        }
    }
}
export default book

getters.js

const book = {
  fileName: state => state.book.fileName,
  menuVisible: state => state.book.menuVisible
}
export default book

在EbookTitle.vue
通过mapGetters去映射

import {mapGetters} from 'vuex'  //引入
export default {

  computed: {
    ...mapGetters(['menuVisible'])
      }
  }

在EbookReader.vue
三个动作，上一页，下一页，点击事件
让点击：显示和隐藏menuTitle

import { mapGetters } from "vuex";
export default {
  computed: {
    ...mapGetters(["fileName" ,'menuVisible'])
  },
  methods: {
    PrevPage() {
      // 先判断this.rendition事件是否存在
      if (this.rendition) {
        this.rendition.prev();
      }
    },
    nextPage() {
      // 先判断this.rendition事件是否存在
      if (this.rendition) {
        this.rendition.next();
      }
    },
    toggleTitleAndMenu() {
      console.log('0000000')
      console.log(this.menuVisible)
      this.$store.dispatch('setMenuVisible',!this.menuVisible)
    },
  } 
}

…mapGetters([“fileName” ,‘menuVisible’])
注意这里用的是一个数组，注意写法，自己一不小心写成了
…mapGetters([“fileName” ],[‘menuVisible’])。导致menuVisible没有引入成功
过渡动画这边 抽个时间看免费课程 记录一下

把EbookMene.vue 这个组件弄好 并且注册到EbookReader.vue组件中去

把html,js,sass移植过来
同样的把显示很隐藏用menuVisible全局vuex去存储

翻页的时候需要隐藏ebookTitle
写一个隐藏ebookTitle的方法
因为出现了很多重复的代码，举个例子

import { mapGetters } from "vuex";
 computed: {
    ...mapGetters(["fileName" ,'menuVisible'])
  },

利用vueX 和mixin 组件间的解耦
在src下新建一个utils文件夹，然后新建一个mixin.js
让所有文件都引入这个mixin.js这个文件，即达到代码的复用简化。
这样有个好处，以后修改只需要在一处修改即可
通过vue里面mixins这样的标签把我们混入的内容放入ebookReader当中
那么vue在实例化的过程中就会把ebookMixin的内容导入到ebookReader当中，从而实现mixin的复用

提问：我们在调用vuex里面的方法的时候全部使用的是dispach方法去触发vueX的Actions。有没有更加简便的方法呢？this.$store.dispatch(‘setMenuVisible’,!this.menuVisible)

当然有啊：运用vuex的一种机制：mapActions
this.setMenuVisible（!this.menuVisible）这样去触发
但是还要给action创建一个映射

import { mapActions } from "vuex";
export default{
   methods: {
    ...mapActions(['setMenuVisible']),
    }
}

但是还要给action创建一个映射
在store文件 夹下创建一个actions.js文件
记得把store文件模板下的book.js里面的action内容给删掉
book.js 里面没有了actions

const book = {
  state: {
    fileName: '',
    menuVisible: false
    },
    mutations: {
      'SET_FILENAME': (state, fileName) => {
        state.fileName = fileName
      },
      'SET_MENUVISIBLE': (state, menuVisible) => {
        state.menuVisible = menuVisible
      }
    }
}
export default book

actions.js

const actions = {
    setFileName: ({ commit }, fileName) => {
      return commit('SET_FILENAME', fileName)
    },
    setMenuVisible: ({ commit }, menuVisible) => {
      return commit('SET_MENUVISIBLE', menuVisible)
    }

}
export default actions

并且在store文件下的index.js去引用这个actions.js

让actions传入到vuex的实例化中去
index.js

import Vue from 'vue'
import Vuex from 'vuex'
import book from './modules/book'
import getters from './getters'// 不是modules的就用一个.
import actions from './actions'
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    book
  },
  getters,
  actions
})

这些写好了后就可以直接this.setMenuVisible(false)这样调用
其实 这种 方法 还可以 混入到mixin.js当中，从而实现更高程度的一定复用

这样我们就不需要在ebookReader.vue中去写

import { mapActions } from “vuex”;
export default {
methods: {
…mapActions([‘setMenuVisible’,‘setFileName’]),
}
}

以上写多了也很不优雅
我们在mixin.js中加入methods:{}

import { mapGetters, mapActions } from 'vuex'

 export const ebookMixin = {
   computed: {
     ...mapGetters([
       'fileName',
       'menuVisible'
     ])
   },
   methods: {
     ...mapActions(['setMenuVisible', 'setFileName'])
   }
 }

从而我们只需要在ebookReader.vue中去写,这样我们就可以优雅的把vuex里面繁琐的代码全部用mixin.js来引入即可

import {ebookMixin} from ‘…/…/utils/mixin’
export default {
mixins: [ ebookMixin ],
}

下面集成web字号的设置
首先在免费课程中把设置字号的代码拷贝过了。这个免费课程很有必要学习一下啊。
然后需要把显示面板的这个变量存储在vuex中去，是通过menubar去显示的。

store文件下的book.js
新增加的settingVisible
state和mutations里面都有新注册内容进去

const book = {
  state: {
    fileName: '',
    menuVisible: false,
    settingVisible: -1 // -1表示不显示，0：字号，1：主题设置，2：进度条 3:目录

    },
    mutations: {
      'SET_FILENAME': (state, fileName) => {
        state.fileName = fileName
      },
      'SET_MENUVISIBLE': (state, menuVisible) => {
        state.menuVisible = menuVisible
      },
      'SET_SETTINGVISIBLE': (state, settingVisible) => {
      state.settingVisible = settingVisible
      }
    }
}
export default book

store文件下的actions.js
在actions中新增setSettingVisible函数，供需要的页面调用

const actions = {
    setFileName: ({ commit }, fileName) => {
      return commit('SET_FILENAME', fileName)
    },
    setMenuVisible: ({ commit }, menuVisible) => {
      return commit('SET_MENUVISIBLE', menuVisible)
    },
    setSettingVisible: ({ commit }, settingVisible) => {
      return commit('SET_SETTINGVISIBLE', settingVisible)
    }

}
export default actions

在store文件下的getters.js写入settingVisible

const book = {
  fileName: state => state.book.fileName,
  menuVisible: state => state.book.menuVisible,
  settingVisible: state => state.book.settingVisible
}
export default book

最后再在utils文件下的mixin.js中去导入这个settingVisible这个变量还有setSettingVisible这个函数

import { mapGetters, mapActions } from 'vuex'

 export const ebookMixin = {
   computed: {
     ...mapGetters([
       'fileName',
       'menuVisible',
        'settingVisible'
     ])
   },
   methods: {
     ...mapActions(['setMenuVisible', 'setFileName', 'setSettingVisible'])
   }
 }

最后我们需要到我们的面板页面EbookSettingFont.vue中去引入mixin.js

import  {ebookMixin} from '../../utils/mixin'
export default {
  mixins: [ ebookMixin ],
  }

标签：menuVisible,项目,ebook,fileName,state,book,export,js
来源： https://blog.csdn.net/weixin_40878286/article/details/90398235