vue

前端 vue

发布时间 : 2024-08-29 19:24

字数:1.3k 阅读 :

Vue2

局部刷新

1，app.vue 中局部刷新

<template>
    <div id="app">
        <router-view v-if="isShow" />
    </div>
</template>

<script>
export default {
  name: "App",
  provide() {
    //父组件中通过provide来提供变量，在子组件中通过inject接受。
    return {
      reload: this.reload,
    };
  },
  data() {
    return {
      //自定义参数
      isShow: true,
    };
  },
  methods: {
    // 刷新
    reload() {
      //reload方法首先将isShow设置为false，将router-view通过if判断取消
      this.isShow = false;
      // Vue.nextTick用于延迟执行一段代码，它接受2个参数（回调函数和执行回调函数的上下文环境），如果没有提供回调函数，那么将返回promise对象。
      this.$nextTick(function () {
        //     在页面更新后再将isShow设置为true
        this.isShow = true;
      });
    },
  },
};
</script>

2，使用得页面中

export default {
    inject:['reload'],//  此处引入在app中定义的reload方法
    name: 'Home'
}

3，接口调用事件

methods: {
      // 右键事件
      delLink(item,e){
        delLink(item.id).then(res=>{
          if (res.data.code === 200) {
            console.log("->",res.data);
            this.$message({
              message: '删除成功',
              type: 'success'
            });
            this.reload(); // 主要   主要   主要
          }
        }).catch(res=>{console.log("delLink->error")})
},

路由history打包后页面空白

vue默认路由模式为 hash，一般打包不会有问题，hash模式url中会带有 #

history模式下，如果项目直接放在根目录下，打包也不会出现什么问题，非根目录的项目需要加上base 的路径

vue router配置

const router = new VueRouter({
  mode: "history",//路由模式
  base: '/justMe',//项目路径
  routes: routes,
  scrollBehavior(to, from, savedPosition) {
    return {x: 0, y: 0}
  }
})

nginx配置

项目指定打包放在根目录

location / {
 try_files $uri $uri/ /index.html;
}

如果不是根目录访问

location /justMe {
   root /apps/justMe;
   index index.html index.htm;
   #error_page 404 /history/index.html;
   if (!-e $request_filename) {
      rewrite ^/(.*) /justMe/index.html last;
      break;
   }
}

数据更新，页面未更新

解决：页面dom元素加 if 判断

V-if="tableList.length>0"

Vuex

https://v3.vuex.vuejs.org/zh/api/

vuex

state ：提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

Action：提交提交到mutation中，而不是直接变更状态，总是接受 context 作为第一个参数，payload 作为第二个参数（可选），可用es6语法解构出 commit，state，dispatch等属性

Mutation：更改 Vuex 的 store 中的状态的唯一方法，总是接受 state 作为第一个参数，payload 作为第二个参数（可选）

const store = new Vuex.Store({
  state: {
    count: 1,
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
  },
  mutations: {
    increment (state,num) {
      // 变更状态
      state.count+=num
    }
  },
  actions: {
    //这里是用了es6解构语法 从context中解构出commit
    increment ({ commit },num) {
      commit('increment',num)
    }
  }
})

组件 –dispatch–> Actions

Action中触发其他Module的Action
dispatch('tagsView/delAllViews', null, { root: true })
触发tagsView这个Module中Actions的delAllViews方法

组件中 ：this.$store.dispatch("increment")

Actions–commit–>Mutation

组件中
this.$store.commit("increment",10)
调用了Mutation的increment方法

Mutation –更改–> State

 state.count+=num

State —-渲染—-> 组件

this.$store.state.count

Getters

接受 state 作为其第一个参数，也可以接受其他 getter 作为第二个参数

组件中使用：
this.$store.getters.doneTodosCount

Module

Vu3+TS

节流

1，新建preventReClick.ts

import { App } from 'vue'

export const setupPreventReClickDirective = (app: App<Element>) => {
    //自定义指令 preventReClick
    app.directive(
        'preventReClick',
        //自定义节流操作
        {
            mounted(el: any, binding: any) {
                el.addEventListener('click', () => {
                    if (!el.disabled) {
                        console.log('true')
                        el.disabled = true
                        setTimeout(() => {
                            el.disabled = false
                        }, binding.value || 500) //500ms间隔时间
                    }
                })
            }
        }
    )
}

2，main.ts添加

// 创建实例
const setupAll = async () => {
    const app = createApp(App)
    //引用
    setupPreventReClickDirective(app)

    app.mount('#app')
}

3，页面使用

<ElButton @click="cancelClick" v-preventReClick="1000" v-if="showCancel">{{ cancelText }}</ElButton>

Ref

在Vue 3中，使用ref获取组件实例时，需要使用.value来访问实例，ref是一个非常有用的特性，可以帮助我们更方便地操作DOM元素或组件实例

<h2 id='a'>馒头</h2>
传统中要获取h2这行元素  document.getElementById('a')


<h2 ref='a'>馒头</h2>
vue中可以
import {ref} from 'vue'
let a = ref() //用于存储ref标记的内容
console.log(a.value) // 输出馒头


-------------------------------
 js中
let count = ref(1) 
console.log(count.value) // 输出 1

// 如果需要传递 count 到某个不接受 ref 的地方，可以使用 unref
unref(count) 会返回 count.value 的值，即 1