zoukankan      html  css  js  c++  java
  • vuex和vue-router全家桶

    vuex

    关键词:state,getters,actions,mutations,store。

    • state为状态的参数。

    • getters为获取器,用于过滤的方法获取参数。

    • mutations是改变状态参数的函数,但是不能直接被调用,需要对应的store.commit(可以额外传参数)。

    • actions不是直接修改状态,而是基于mutations,可以执行异步处理

    • store更像一个容器,装着以上的所有函数和参数,最后需要注入到Vue的实例当中。

      2.0 特性--辅助函数

      辅助函数j就是可用可不用。如果你用了,它就会提高代码编写效率的。

      • mapState
      • mapGetter
      • mapMutation

      举个例子,如果不用辅助函数mapState

      computed: {
          count () {
            return this.$store.state.count
          }
        }

      使用辅助函数mapState

      computed: mapState([
        // 映射 this.count 为 store.state.count
        'count'
      ])

      如果不用辅助函数mapGetter

      computed: {
        doneTodosCount () {
          return this.$store.getters.doneTodosCount
        }
      }

      使用辅助函数mapGetter

      computed: {
        // 使用对象展开运算符将 getters 混入 computed 对象中
          ...mapGetters([
            'doneTodosCount',
            'anotherGetter',
          ])
        }

      如果不用辅助函数mapMutation

      methods: {
          increment(){
              this.$store.commit('increment')
          },
      }

      使用辅助函数mapMutation

      methods: {
          ...mapMutations([
            'increment',
           ]),
      }

      如果不用辅助函数mapActions

      methods: {
          increment(){
              this.$store.dispatch('increment')
          },
      }

      使用辅助函数mapActions

      methods: {
          ... mapActions([
            'increment',
           ]),
      }

      vue-rounter

    • vue-router的出现不是个意外,也不是让你将所有的路由都装在vue-router。它更多是用于SPA,把一些动态的内容提取出来。例如动态路由。详情请参考官网
      const User = {
        template: '<div>User</div>'
      }
      
      const router = new VueRouter({
        routes: [
          // 动态路径参数 以冒号开头
          { path: '/user/:id', component: User }
        ]
      })

      路由可以针对组件User分配id,js端也可以获取路由的参数。

      const User = {
        template: '<div>User {{ $route.params.id }}</div>'
      }

      关于懒加载

    • 懒加载的功能并非vue特有,而是webpack特有的,有几种特殊的写法
      const Foo = resolve => {
        // require.ensure 是 Webpack 的特殊语法,用来设置 code-split point
        // (代码分块)
        require.ensure(['./Foo.vue'], () => {
          resolve(require('./Foo.vue'))
        })
      }

      也可以简写为

      const Foo = resolve => require(['./Foo.vue'], resolve)

      懒加载会独立分包,把对应的组件独立打包。而懒加载组件的css将不会进行提取。但是会对route-view级别的css进行打包,因此建议将共有的css放在route-view级别。

  • 相关阅读:
    如何在ASP.NET Core项目启动时执行异步定时任务
    计算机组成原理实验:Cache控制器设计实验 问题解决
    jenkins + gitlab 利用pipeline 完整构建项目
    利用K8S的jenkins动态slave+gitee + dockerhub实现完整的develops
    pycharm 上传代码到码云
    关于CI/CD的实践(二 提交阶段流水线)
    sonarqube-7.8 安装
    关于CI/CD的实践(一 流程规划)
    ubutun 安装nvm管理node
    关于容器的健康检查 Health Check
  • 原文地址:https://www.cnblogs.com/fanting/p/11341833.html
Copyright © 2011-2022 走看看