/** 后台路径(相对路径) */
define('__TYPECHO_ADMIN_DIR__', '/admin/');

  <style>
    .fade-enter-active, .fade-leave-active {
      transition: opacity .5s;
    }
    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
  </style>
  <div id="app">
    <button @click="show = !show">按钮</button>
    <transition name="fade">
      <p v-if="show">一段文字</p>
    </transition>  
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data(){
        return{
          show:true
        }
      }
    })
  </script>

.fade-enter-active{
 animation: fade-in .5s;
}
.fade-leave-active{
 animation: fade-in 5s reverse;
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<transition 
  name="fade"
  enter-active-class="animated fadeInUp"
  leave-active-class="animated fadeInDown"
>
  <p v-if="show" style="color:red;text-align: center;">一段文字</p>
</transition>  

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

 <div id="app">
    <button @click="show = !show">按钮</button>
    <transition 
      v-on:before-enter="beforeEnter"
      v-on:enter="enter"
      v-on:leave="leave"
      v-bind:css="false"
    >
      <p v-if="show" style="color:red;text-align: center;">一段文字</p>
    </transition>  
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data(){
        return{
          show:true
        }
      },
      methods:{
        beforeEnter: function (el) {
          el.style.opacity = 0
          el.style.transformOrigin = 'left'
        },
        enter: function (el, done) {
          Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 })
          Velocity(el, { fontSize: '1em' }, { complete: done })
        },
        leave: function (el, done) {
          Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 })
          Velocity(el, { rotateZ: '100deg' }, { loop: 2 })
          Velocity(el, {
            rotateZ: '45deg',
            translateY: '30px',
            translateX: '30px',
            opacity: 0
          }, { complete: done })
        }
      }
    })
  </script>

.custom-appear-active-class{
  transition: all 2s;
}
.custom-appear-class{
  opacity: 0;
  transform: translate(100px);
}
<transition 
  appear  
  appear-class="custom-appear-class"
  appear-to-class="custom-appear-to-class"
  appear-active-class="custom-appear-active-class animated fadeIn"
>
  <p>一段文字</p>
</transition> 

<transition name="fade" mode="out-in">
  <button v-if="show" @click="show = !show" key="p1">一段文字</button>
  <button v-else @click="show = !show" key="p2">另一段文字</button>
</transition>  

  <div id="app">
    <input type="radio" v-model="view" value="a-component">A
    <input type="radio" v-model="view" value="b-component">B
    <transition name="fade" mode="out-in">
      <component :is="view"></component>
    </transition>  
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const AComponent = {
      template:`
        <p>我是A组件</p>
      `
    } 
    const BComponent = {
      template:`
        <p>我是B组件</p>
      `
    } 
    const app = new Vue({
      el:'#app',
      data(){
        return{
          view:'a-component'
        }
      },
      components:{
        AComponent,
        BComponent
      }
    })
  </script>

  <style>
   .list-item {
      transition: all 1s;
      display: inline-block;
      margin-right: 10px;
    }
    .list-enter, .list-leave-to {
      opacity: 0;
      transform: translateY(30px);
    }
    .list-leave-active {
      position: absolute;
    }
  </style>
  <div id="app">
    <button @click="addNum">添加</button>
    <button @click="delNum">删除</button>
    <button @click="shuffleNum">重新排序</button>
    <transition-group name="list" tag="ul">
      <li class="list-item" v-for="item in list" :key="item">{{item}}</li>
    </transition-group>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.14.1/lodash.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data(){
        return {
          list:[1,2,3,4,5,6,7,8,9],
          nextNum:10
        }
      },
      methods:{
        randomNum(){
          return _.random(0, this.list.length - 1);
        },
        addNum(){
          this.list.splice(this.randomNum(),0,this.nextNum++)
        },
        delNum(){
          this.list.splice(this.randomNum(),1)
        },
        shuffleNum(){
          this.list = _.shuffle(this.list)
        }
      }
    })
  </script>

Vue.component('my-special-transition',{
  methods:{
    beforeEnter: function (el) {
      el.style.opacity = 0
    },
    enter: function (el, done) {
      Velocity(el, { opacity: 1, translateX: 100 }, { duration: 300 })
      Velocity(el, { translateX: 0 }, { duration: 2000, complete: done })
    },
    leave: function (el, done) {
      Velocity(el, { opacity: 0}, { duration: 300,complete: done  })
    }
  },
  template:`
    <transition
      mode="out-in"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
      :css="false"
    >
      <slot></slot>
    </transition>
  `
})

Vue.component('my-special-transition',{
  functional: true,
  render(h,c){
    var data = {
      props: {
        mode: 'out-in',
        css:false
      },
      on: {
        beforeEnter: function (el) {
          el.style.opacity = 0
        },
        enter: function (el, done) {
          Velocity(el, { opacity: 1, translateX: 100 }, { duration: 300 })
          Velocity(el, { translateX: 0 }, { duration: 2000, complete: done })
        },
        leave: function (el, done) {
          Velocity(el, { opacity: 0}, { duration: 300,complete: done  })
        }
      }
    }
    return h('transition', data, c.children)
  }
})

  <style>
    .text{
      transition: all .5s;
      opacity: 0;
    }
    .text.active{
      opacity:1
    }
  </style>
  <div id="app">
    <button @click="show = !show">按钮</button>
    <p class="text" :class="{active : show}">一段文字</p>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const app = new Vue({
      el:'#app',
      data(){
        return {
          show:false
        }
      }
    })
  </script>

  <div id="app">
    <a-component></a-component>
    <hr>
    <b-component></b-component>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    const MixinA = {
      data(){
        return{
          list:[1,2,3,4,5,6,7,8,9],
          nextNumber:10
        }
      },
      methods:{
        randomIndex(){
          return Math.floor(Math.random() * this.list.length)
        }
      }
    }
    const AComponent = {
      name:'AComponent',
      mixins:[MixinA],
      methods:{
        deleteNumber(){
          this.list.splice(this.randomIndex(),1)
        }
      },
      template:`
       <div>
          <button @click="deleteNumber">删除</button>  
          <ul>
            <li v-for="item in list" :key="item">{{item}}</li> 
          </ul>
        </div>
      `
    }
    const BComponent = {
      name:'BComponent',
      mixins:[MixinA],
      methods:{
        addNumber(){
          this.list.splice(this.randomIndex(),0,this.nextNumber++)
        }
      },
      template:`
        <div>
          <button @click="addNumber">添加</button>  
          <ul>
            <li v-for="item in list" :key="item">{{item}}</li> 
          </ul>
        </div>
      `
    }
    const app = new Vue({
      el:'#app',
      components:{
        AComponent,
        BComponent
      }
    })
  </script>

import Vue from 'vue'
import AV from 'leancloud-storage'

AV.init({
	appId: `应用的appId`,
	appKey: `应用的appKey`
})
 
Vue.prototype.$av = AV

async saveData() {
	// 声明 class
	const todo = this.$av.Object(`Todo`)
	//添加字段
	todo.set(`title`, `马拉松报名`)
	todo.set(`priority`, 2)
	//保存
	await todo.save().then(data => {
		console.log(data)
	})
}

async getDataByObjectId() {
	const objectId = `5f97cedbd47c5a4bea913ebc`
	const query = new this.$av.Query(`Todo`)
	await query.get(objectId).then(data => {
		console.log(data.toJSON())
	})
}

updateByObjectId() {
	const objectId = `5f97cedbd47c5a4bea913ebc`
	const todo = this.$av.Object.createWithoutData(`Todo`, objectId)
	todo.set(`title`, `这周周会改到周三下午三点。`)
	todo.save()
}

delByObjectId() {
	const objectId = `5f97cedbd47c5a4bea913ebc`
	const todo = this.$av.Object.createWithoutData(`Todo`, objectId)
	todo.destroy()
}

saveAllData() {
	const todos = []
	for (let i = 0 ; i < 50 ; i++) {
		const todo = this.$av.Object(`Todo`)
		todo.set(`title`, `标题${i + 1}`)
		todo.set(`click`, i + 1)
		todos.push(todo)
	}
	this.$av.Object.saveAll(todos)
}

Host github.com
Hostname ssh.github.com
Port 443

const User = {
  props:{
    id:{
      type:String,
      required:true
    }
  },
  template: '<div>User {{id}}</div>'
}
const routes = [
  { path: '/user/:id', component: User ,props:true},
  // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]

  { path: '/user/:id', component: User ,props:route=>({query:route.query,id:route.params.id})}

//全局前置守卫
router.beforeEach((to, from, next) => {
  console.log(to,from)
  //如果用户的id为4，跳转到id为1的用户
  if(to.params.id === '4'){
    next({name:'user',params:{id:'1'}})
  }else{
    next()
  }
})

router.afterEach((to, from) => {
  // ...
})

const routes = [
  { path: '/user/:id',name:'user', component: User ,props:route=>({query:route.query,id:route.params.id}),
  beforeEnter:(to,from ,next)=>{
      console.log('路由独享守卫')
      next()
    }
  }
]

  beforeRouteEnter (to, from, next) {
    console.log('beforeRouteEnter')
    next()
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate (to, from, next) {
    console.log('beforeRouteUpdate')
    next()
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    console.log('beforeRouteLeave')
    next()
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  },

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

  {
    path: '/foo',
    component: Foo,
    children: [
      {
        path: 'bar',
        component: Bar,
        // a meta field
        meta: { requiresAuth: true }
      }
    ]
  }

const GoodsContent = {
  data(){
    return {
      swiper:null
    }
  },
  //导航完成前获取数据
  // beforeRouteEnter (to, from, next) {
  //   next(vm=>{
  //     vm.fetchData(to.params.id).then(response=>{
  //       vm.swiper = response.data.message
  //     })
  //   })
  // },
  // beforeRouteUpdate (to, from, next) {
  //   this.swiper = null
  //   this.fetchData(to.params.id).then(response=>{
  //     this.swiper = response.data.message
  //     next()
  //     console.log(response.data.message.goods_name);
  //   })
  // },
  //导航完成后获取数据
  watch:{
    $route:{
      handler(val){
        this.swiper = null
        console.log(val.params);
        this.fetchData(val.params.id).then(response=>{
          this.swiper = response.data.message
          console.log(response.data.message.goods_name);
        })
      },
      immediate:true
    }
  },
  methods:{
    fetchData(goods_id){
      return axios.get('后台地址?goods_id='+goods_id)
    }
  },
  template:`<div>
    <div v-if="swiper">
      {{swiper.goods_name}}
    </div>
    <div v-else>
      Loading...
    </div>
  </div>`
}

<template>
  <div
    ref="main"
    style="width: 600px;height: 400px;"
  />
</template>

<script>
import echarts from 'echarts'
export default {
  mounted() {
    const option = {
      title: {
        text: `ECharts 入门示例`
      },
      tooltip: {},
      legend: {
        data: [`销量`]
      },
      xAxis: {
        data: [`衬衫`, `羊毛衫`, `雪纺衫`, `裤子`, `高跟鞋`, `袜子`]
      },
      yAxis: {},
      series: [
        {
          name: `销量`,
          type: `bar`,
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    }
    echarts.init(this.$refs.main).setOption(option)
  }
}
</script>

const dataset = {
  xAxis: {
    type: `category`
  },
  yAxis: {},
  dataset: {
    source: [
      [`一月`, 23, 12, `XX`],
      [`二月`, 12, 23, `YY`],
      [`三月`, 63, 4, `ZZ`],
      [`四月`, 44, 34]
    ]
  },
  series: [
    {
      type: `pie`,
      center: [`65%`, 60],
      radius: 35,
      encode: { itemName: 3, value: 2 }
    },
    {
      type: `line`,
      encode: { x: 0, y: 1 }
    },
    {
      type: `bar`,
      encode: { x: 0, y: 2 }
    }
  ]
}
const series = {
  xAxis: {
    data: [`一月`, `二月`, `三月`, `四月`]
  },
  yAxis: {},
  series: [
    {
      type: `pie`,
      center: [`65%`, 60],
      radius: 35,
      data: [
        { name: `XX`, value: 52 },
        { name: `YY`, value: 54 },
        { name: `ZZ`, value: 42 }
      ]
    },
    {
      type: `line`,
      data: [3, 1, 2, 4, 6]
    },
    {
      type: `bar`,
      data: [30, 10, 20, 40, 60]
    }
  ]
}

const dataset = {
  xAxis: [
    { type: `category`, gridIndex: 0 },
    { type: `category`, gridIndex: 1 }
  ],
  yAxis: [
    { type: `value`, gridIndex: 0 },
    { type: `value`, gridIndex: 1 }
  ],
  grid: [
    {
      top: 40,
      bottom: `58%`
    },
    {
      top: `58%`,
      bottom: 40
    }
  ],
  dataset: {
    source: [
      [`一月`, 23, 12, `XX`, 52],
      [`二月`, 12, 23, `YY`, 54],
      [`三月`, 63, 4, `ZZ`, 42],
      [`四月`, 44, 34]
    ]
  },
  series: [
    {
      type: `pie`,
      center: [`100%`, 40],
      radius: 35,
      encode: { itemName: 3, value: 4 }
    },
    {
      type: `line`,
      encode: { x: 0, y: 2 },
      xAxisIndex: 0,
      yAxisIndex: 0
    },
    {
      type: `line`,
      encode: { x: 0, y: 1 },
      xAxisIndex: 1,
      yAxisIndex: 1
    },
    {
      type: `bar`,
      encode: { x: 0, y: 2 },
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
}

import './theme/custom'

this.$echarts.init(this.$refs.pieChart, `custom`).setOption(option)

<template>
  <div>
    <img :src="imgSrc" v-show="visible" />
  </div>
</template>

<script>
import { ref } from 'vue'
export default {
  name: `CoverImage`,
  setup() {
    const imgSrc = ref(``)
    const visible = ref(false)
    const loadImg = function (src) {
      let img = new Image()
      img.src = src
      img.onload = img.onerror = () => {
        imgSrc.value = src
        visible.value = true
        this.$emit(`addLoadIndex`)
      }
    }
    return { imgSrc, visible, loadImg }
  },
}
</script>

<template>
  <div>
    <div class="img-wrap" v-for="(src, index) in srcList" :key="index">
      <cover-image :ref="setItemRef" :eleIndex="index"></cover-image>
    </div>
  </div>
</template>

<script>
import { onBeforeUpdate, onMounted } from 'vue'

import CoverImage from './components/CoverImage'
export default {
	name: `CoverShowList`,
	components: {
		CoverImage
	},
	setup() {
		const srcList = [
			`https://i.postimg.cc/prGHDHk6/14.jpg`,
			`https://i.postimg.cc/tTzy4P6y/13.jpg`,
			`https://i.postimg.cc/YqDrF1sC/10.jpg`
		]
		let itemRefs = []
		let io = null
		const setItemRef = function (el) {
			itemRefs.push(el)
		}
		const getStatus = function (items) {
			items.map((item) => {
				if (!item.isIntersecting) return
				const eleIndex = item.target.getAttribute(`eleIndex`)
				itemRefs[eleIndex].loadImg(srcList[eleIndex])
				io.unobserve(item.target)
			})
		}
		onMounted(() => {
			io = new IntersectionObserver(getStatus)
			itemRefs.map((item) => {
				io.observe(item.$el)
			})
		})
		onBeforeUpdate(() => {
			itemRefs = []
		})
		return { srcList, setItemRef }
	}
}
</script>

<style>
.img-wrap {
  border: 1px solid red;
  padding: 400px 200px;
  margin-top: 200px;
}
.display-none {
  display: none;
}
</style>

<template>
  <div>
    <div v-for="(item, i) in srcList" :key="i">
      <cover-image :ref="setItemRef" @addLoadIndex="addLoadIndex"></cover-image>
    </div>
  </div>
</template>

<script>
import { ref, watch, onMounted, onBeforeUpdate } from 'vue'

import CoverImage from './components/CoverImage'
export default {
	name: `CoverImageList`,
	components: {
		CoverImage
	},
	setup() {
		const srcList = [
			`https://i.postimg.cc/prGHDHk6/14.jpg`,
			`https://i.postimg.cc/tTzy4P6y/13.jpg`,
			`https://i.postimg.cc/YqDrF1sC/10.jpg`
		]
		let itemRefs = []
		const loadIndex = ref(0)
		const setItemRef = function (el) {
			itemRefs.push(el)
		}
		const addLoadIndex = function () {
			loadIndex.value++
		}
		onMounted(() => {
			itemRefs[loadIndex.value].loadImg(srcList[loadIndex.value])
		})
		onBeforeUpdate(() => {
			itemRefs = []
		})
		watch(loadIndex, (value) => {
			itemRefs[value] && itemRefs[value].loadImg(srcList[loadIndex.value])
		})
		return { loadIndex, srcList, setItemRef, addLoadIndex }
	}
}
</script>

data: {
  newTodoText: '',//字符串类型初始值
  visitCount: 0,//数字类型初始值
  hideCompletedTodos: false,//布尔类型初始值
  todos: [],//数组类型初始值
  obj: {}//对象类型初始值
  error: null//不存在数据的初始值
}

Vue.set(vm.someObject, 'b', 2)
//or
this.$set(this.someObject,'b',2)

  // obj:{
  //   a:1,
  //   b:2
  // }
  //向obj种添加单个属性c
  this.$set(this.obj,'c',3)
  //向obj中添加c和d属性
  this.obj = Object.assign({},this.obj,{c:3,d:4})

  // numbers: [ 1, 2, 3, 4, 5 ]
  this.numbers = this.numbers.filter(number => number>3)

  // numbers: [ 1, 2, 3, 4, 5 ]
  //无法使用索引直接修改
  //this.numbers[3] = 123456
  //应该使用
  this.$set(this.numbers,3,123456)
  // or
  this.numbers.splice(3,1,123456)

  // numbers: [ 1, 2, 3, 4, 5 ]
  //无法直接修改数组长度
  // this.numbers.length = 2
  //应该使用
  this.numbers.splice(2)

    changeShow(show,record){
      //直接修改视图可响应
      record.show = !show
    }

//从后台得到数据
this.handleData = [
  {id:1,name:'红'},
  {id:2,name:'黄'},
  {id:3,name:'蓝'},
]
//处理一下后台的数据
this.handleData = sourceData.map(item=>{
  item.show = false
  return item
})

this.handleData = sourceData.map(item=>{
  item = Object.assign({},item,{show:false})
  return item
})

changeShow(show,record){
  //直接修改视图不会响应
  record.show = !show
  //官方推荐使用方法
  this.$set(
    this.handleData,
    this.handleData.findIndex(item => {
      return item.id === record.id
    }),
    Object.assign({},record,{show:!show})
  )
  //使用splice
  this.handleData.splice(
    this.handleData.findIndex(item => {
      return item.id === record.id
    }),
    1,
    Object.assign({},record,{show:!show})
  )
}

<input type="checkbox"  v-model="form.checked" value="apple">是否{{form.checked}}

<input type="checkbox"  v-model="form.fruits" value="apple">苹果
<input type="checkbox"  v-model="form.fruits" value="banana">香蕉
<input type="checkbox"  v-model="form.fruits" value="peach">桃子

<input type="radio"  value="1" v-model="form.gender">男
<input type="radio"  value="2" v-model="form.gender">女

<input
  type="checkbox"
  v-model="toggle"
  true-value="yes"
  false-value="no"
>

<select v-model="selected">
  <option v-bind:value="obj">选项1</option>
</select>

<input v-model="searchText">

<input
  :value="searchText"
  @input="searchText = $event.target.value"
>

<custom-input
  v-model="searchText"
></custom-input>

<custom-input
  :value="searchText"
  @input="searchText = $event"
></custom-input>

Vue.component('custom-input',{
  props:['value'],
  template:`
    <div>
      <input :value="value" @input="$emit('input',$event.target.value)" />
    </div>
  `
})

Vue.component('child-component',{
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <div>
      <input
        type="checkbox"
        :checked="checked"
        @change="$emit('change', $event.target.checked)"
      >
    </div>
  `
})

<component :is="currentComponent"></component> 


Vue.component('home-co',{
  template:`<h1>Home Page</h1>`
})
Vue.component('archive-co',{
  template:`<h1>Archive Page</h1>`
})
Vue.component('post-co',{
  template:`<h1>Post Page</h1>`
})
const app = new Vue({
  el:'#app',
  data(){
    return {
      text:'',
      currentComponent:'archive-co'
    }
  }
})

Vue.component('base-input', {
  inheritAttrs: false,
  props: ['label', 'value'],
  computed: {
    inputListeners: function () {
      var vm = this
      return Object.assign({},
        this.$listeners,
        {
          input: function (event) {
            vm.$emit('input', event.target.value)
          }
        }
      )
    }
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        :value="value"
        v-on="inputListeners"
      >
    </label>
  `
})

<child-component :message.sync="message"></child-component>

<child-component :message="message" @update:message="message = $event"></child-component>

Vue.component('parent-component',{
  data(){
    return{
      message:'旧消息',
    }
  },
  template:`
    <child-component :message="message" @update:message="message = $event"></child-component>
  `
})
Vue.component('child-component',{
  props:{
    message:{
      type:String,
      required:false,
      default:''
    }
  },
  template:`<div>
    子组件:{{message}}
    <button @click="$emit('update:message','新消息')">按钮</button>
  </div>`
})

post: {
  id: 1,
  title: 'My Journey with Vue'
}

<blog-post v-bind="post"></blog-post>

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

categoryArr: [
	{ id: 1, name: `音乐`, pid: 0 },
	{ id: 2, name: `萝卜`, pid: 9 },
	{ id: 3, name: `食物`, pid: 0 },
	{ id: 4, name: `菠菜`, pid: 9 },
	{ id: 5, name: `周杰伦`, pid: 1 },
	{ id: 6, name: `五月天`, pid: 1 },
	{ id: 7, name: `五花肉`, pid: 8 },
	{ id: 8, name: `肉`, pid: 3 },
	{ id: 9, name: `蔬菜`, pid: 3 }
],

childrenArr: [
	{
		id: 1,
		name: `音乐`,
		pid: 0,
		children: [
			{ id: 5, name: `周杰伦`, pid: 1 },
			{ id: 6, name: `五月天`, pid: 1 }
		]
	},
	{
		id: 3,
		name: `食物`,
		pid: 0,
		children: [
			{
				id: 8,
				name: `肉`,
				pid: 3,
				children: [{ id: 7, name: `五花肉`, pid: 8 }]
			},
			{
				id: 9,
				name: `蔬菜`,
				pid: 3,
				children: [
					{ id: 2, name: `萝卜`, pid: 9 },
					{ id: 4, name: `菠菜`, pid: 9 }
				]
			}
		]
	}
]

handleCategory(categoryArr) {
	const first = categoryArr.filter(h => h.pid === 0),
		notFisrt = categoryArr.filter(h => h.pid !== 0)
	this.renderChildren(first, notFisrt)
	return first
},
renderChildren(firstArr, notFisrtArr) {
	firstArr.forEach(h => {
		const children = notFisrtArr.filter(j => j.pid === h.id)
		if (children) {
			this.renderChildren(children, notFisrtArr)
		}
		h.children = children
	})
}

console.log(this.handleCategory(this.categoryArr))

childArr: [
	{ id: 12, name: `肉`, children: [] },
	{
		id: 1,
		name: `水果`,
		children: [
			{ id: 2, name: `香蕉` },
			{ id: 3, name: `橘子` }
		]
	},
	{
		id: 4,
		name: `车`,
		children: [
			{
				id: 5,
				name: `国产车`,
				children: [
					{
						id: 8,
						name: `红旗`
					},
					{ id: 9, name: `长虹` }
				]
			},
			{
				id: 6,
				name: `外国车`,
				children: [
					{
						id: 7,
						name: `奔驰`
					}
				]
			}
		]
	}
]

handleOneDimensional(childrenArr) {
	const result = []
	this.renderFirst(result, childrenArr)
	return result.map(h => {
		delete h.children
		return h
	})
},
renderFirst(oneArr, childrenArr) {
	childrenArr.forEach(h => {
		oneArr.push(h)
		if (h.children && h.children.length !== 0) {
			this.renderFirst(oneArr, h.children)
		}
	})
}

console.log(this.handleOneDimensional(this.childArr))

arr.forEach((item, index) => {
	arr[index] = item * 3
})

const arr = [{ id: 1 }, { id: 2 }, { id: 3 }]
arr.forEach(item => {
	item = { id: 4 }
})
console.log(arr)//[{ id: 1 }, { id: 2 }, { id: 3 }]

const arr = [
	{ id: 1, name: `小明` },
	{ id: 2, name: `小红` },
	{ id: 3, name: `小刚` }
]
_.each(arr, h => {
	console.log(h)
})
const obj = {
	a: 1,
	b: 2,
	c: 3
}
_.each(obj, (k, v) => {
	console.log(k, v)
})

	peopleInfo: [
		{ id: 101, name: `小明`, age: 32 },
		{ id: 102, name: `小刚`, age: 12 },
		{ id: 103, name: `小红`, age: 16 }
	]

//使用underscore
_.max(this.peopleInfo, h => h.age)
//不使用unserscore的简单方法
this.peopleInfo.sort((a, b) => {
	return b.age - a.age
})[0]

this.peopleInfo.concat().sort((a, b) => b.age - a.age)[0]

_.chunk([1, 2, 3, 4, 5], 2)

this.logHello = _.throttle(this.logHello, 1000)

this.searchContent = _.debounce(this.searchContent, 1000)

/** index.js */
const express = require('express')

const app = express()
app.use(express.json())

const user = [
  {id:1,name:'xiaoming',age:1},
  {id:2,name:'xiaohong',age:2},
  {id:3,name:'xiaogang',age:3}
]

const setCacheControl = (res,maxAge=1) => {
  // 不带参数的请求建议加上。
  res.setHeader('Cache-Control', `s-max-age=${maxAge}, stale-while-revalidate`)
}

app.get('/api/queryUsers', (req, res) => {
  setCacheControl(res,30)
  res.json(user)
})

app.get('/api/queryUser/:name', (req, res) => {
  const { name } = req.params
  const findUser = user.find(item=>item.name === name)
  res.json(findUser || '没有这个用户')
})

/**
 * 和平时一样写，只不过要导出app，并且不用绑定 listen
 */
module.exports = app

/** vercel.json */
{
  "rewrites": [{ "source": "/api/(.*)", "destination": "/api" }]
}

if (!-e $request_filename){
	rewrite ^(.*)$ /index.php$1 last;
}

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)$ index.php [L,E=PATH_INFO:$1]
</IfModule>

引入
import {createImageSrc} from '@/untils'

调用
createImageSrc({
   number:123456789,
   length:10,
   theme:'gelbooru'
})

返回
    [ 
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/0.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/1.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/2.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/3.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/4.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/5.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/6.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/7.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/8.gif",
      "//fastly.jsdelivr.net/gh/journey-ad/Moe-counter@master/assets/theme/gelbooru/9.gif" 
    ]

<template>
  <div class="show">
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc1" :key="index" :src="src" alt="">
    </div>
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc2" :key="index" :src="src" alt="">
    </div>
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc3" :key="index" :src="src" alt="">
    </div>
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc4" :key="index" :src="src" alt="">
    </div>
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc5" :key="index" :src="src" alt="">
    </div>
    <div class="images-wapper">
      <img v-for="(src,index) in imageSrc6" :key="index" :src="src" alt="">
    </div>
  </div>
</template>

<script>
import { createImageSrc } from '@/untils'
export default {
  name:'ShowView',
  data:()=>({
    imageSrc1:[],
    imageSrc2:[],
    imageSrc3:[],
    imageSrc4:[],
    imageSrc5:[],
    imageSrc6:[],
  }),
  mounted(){
    this.imageSrc1 = createImageSrc({
      number:123456789,
      length:10,
    })
    this.imageSrc2 = createImageSrc({
      number:123456789,
      length:10,
      theme:'gelbooru',
    })
    this.imageSrc3 = createImageSrc({
      number:123456789,
      length:10,
      theme:'gelbooru-h',
    })
    this.imageSrc4 = createImageSrc({
      number:123456789,
      length:10,
      theme:'moebooru',
    })
    this.imageSrc5 = createImageSrc({
      number:123456789,
      length:10,
      theme:'moebooru-h',
    })
    this.imageSrc6 = createImageSrc({
      number:123456789,
      length:10,
      theme:'rule34',
    })
  }
}
</script>

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "stylelint src/**/*.vue src/**/*.scss --fix && vue-cli-service lint",
    "lint:scss": "stylelint src/**/*.vue src/**/*.scss --fix"
  },

module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  css: {
    loaderOptions: {
      sass: {
        additionalData: `
          @import "~@/index.scss";
        `,
      },
    },
  },
});

Vue.component('navigation-link',{
  props:{
    url:{
      type:String,
      required:false,
      default:'/'
    }
  },
  template:`
    <a
      :href="url"
      class="nav-link"
    >
      <slot></slot>
    </a>
  `
})

<navigation-link :url="'/profile'">Your Profile</navigation-link>

Vue.component('submit-button',{
  template:`
    <button type="submit">
      <slot>Submit</slot>
    </button>
  `
})

Vue.component('base-layout',{
  template:`
    <div>
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot name="default"></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
})

//组件
<slot name="default" :base-layout-data="baseLayoutData"></slot>
//使用
<template #default="slotProps" >
  <h1>模板的内容{{slotProps}}</h1>
</template>

<template #default="{baseLayoutData}" >
  <h1>模板的内容{{baseLayoutData}}</h1>
</template>
//将数据解构并重新命名
<template #default="{baseLayoutData:childrenData}" >
  <h1>模板的内容{{childrenData}}</h1>
</template>
//将数据解构并重新命名并给予默认值以应对undefined的情况
<template #default="{baseLayoutData:childrenData='123'}" >
  <h1>模板的内容----{{childrenData}}</h1>
</template>

    <p ref="refP">我是一个简单的p标签</p>
    
    console.log(this.$refs.refP.innerHTML)
    //我是一个简单的p标签

    <child-component ref="childComponent"></child-component>
    
    Vue.component('child-component', {
      methods: {
        logData() {
          console.log('我是子组件的方法')
        }
      },
      template: `<div>我是子组件</div>`
    })
    
    this.$refs.childComponent.logData()

    <ul>
      <li v-for="people in peoples" :key="people" ref="refPeoples">
        <span>{{ people }}</span>
      </li>
    </ul>

    <ul>
      <li v-for="people in peoples" :key="people">
        <span ref="refPeoples">{{ people }}</span>
      </li>
    </ul>

    <ul>
      <li key="小明" ref="refPeoples">小明</li>
      <li key="小红" ref="refPeoples">小红</li>
      <li key="小刚" ref="refPeoples">小刚</li>
    </ul>

如果觉得使用yarn下载很慢，也可以使用tyarn。
安装方式：
yarn global add tyarn

const BComponent = {
  watch: {
    $route:{
      handler(to, from) {
        console.log(to,from);
      },
      immediate:true
    }
  },
  template:`<h1>B组件{{$route.params.id}}</h1>`
}

  <div id="app">
    <router-link to="/a">A组件</router-link>
    <router-link to="/b">B组件</router-link>
    <hr>
    <router-view></router-view>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
    const AComponent = {template:`<h1>A组件</h1>`}
    const BComponent = {template:`<h1>B组件</h1>`}

    const routes = [
      {path:'/a',component:AComponent},
      {path:'/b',component:BComponent},
    ]

    const router = new VueRouter({
      routes
    })

    const app = new Vue({
      router,
    }).$mount('#app')
  </script>

const routes = [
  {path:'/a',component:AComponent},
  {path:'/b/:id',component:BComponent},
]

{
  // 会匹配所有路径
  path: '*'
}
{
  // 会匹配以 `/user-` 开头的任意路径
  path: '/user-*'
}

  <div id="app">
      <router-link to="/home">首页</router-link>
      <router-link to="/post-list">文章</router-link>
      <hr>
      <router-view></router-view>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
    const postList = [
      {id:1,title:'文章1',content:'文章1内容'},
      {id:2,title:'文章2',content:'文章2内容'},
      {id:3,title:'文章3',content:'文章3内容'},
      {id:4,title:'文章4',content:'文章4内容'},
    ]
    const Home = {
      template:'<h1>首页</h1>'
    }
    const notFoundPost = {
      template:'<h1>请选择文章</h1>'
    }
    const PostListComponent = {
      data(){
        return {
          postList
        }
      },
      template:`
        <div>
            <router-link 
              v-for="post in postList" 
              :key="post.id" 
              :to="'/post-list/'+post.id"
            >
              {{post.title}}
            </router-link>
            <hr></hr>
            <router-view></router-view>
        </div>
      `
    }
    const postContentComponent = {
      data(){
        return {
          postList
        }
      },
      computed:{
        postTitle(){
          return this.postList.find(item=>''+item.id === this.$route.params.id).title
        },
        postContent(){
          return this.postList.find(item=>''+item.id === this.$route.params.id).content
        }
      },
      template:`
        <div>
          <h1>{{postTitle}}</h1>  
          <p>{{postContent}}</p>  
        </div>
      `
    }
    const routes = [
      {path:'/home',component:Home},
      {path:'/post-list',component:PostListComponent,
        children:[
          //当访问/post-list,PostListComponent出口渲染写什么
          {
            path:'',component:notFoundPost
          },
          {
            path:':id',component:postContentComponent
          }
        ]
      },
    ]
    const router = new VueRouter({routes})
   const app = new Vue({
    router,
   }).$mount('#app')
  </script>

    const routes = [
      {path:'/home',component:Home},
      {path:'/post-list',component:PostListComponent,
        children:[
          //当访问/post-list,PostListComponent出口渲染写什么
          {
            path:'',component:notFoundPost
          },
          {
            path:':id',component:postContentComponent
          }
        ]
      },
    ]

// 字符串
router.push('home')

// 对象
router.push({ path: 'home' })

// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})

// 带查询参数，变成 /register?plan=private
router.push({ path: 'register', query: { plan: 'private' }})

const userId = '123'
router.push({ name: 'user', params: { userId }}) // -> /user/123
router.push({ path: `/user/${userId}` }) // -> /user/123
// 这里的 params 不生效
router.push({ path: '/user', params: { userId }}) // -> /user

router.go(1) //前进一步

router.go(-1) //后退一步

router.go(100) //如果超出history记录，会执行失败

routes: [
    {
      path: '/user/:userId',
      name: 'user',
      component: User
    }
  ]

{ name: 'user', params: { userId: 123 }}

  <div id="app">
    <router-view></router-view>
    <router-view name="a"></router-view>
    <router-view name="b"></router-view>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
  <script>
    const Bar = {template:`<h1>Bar区域</h1>`}
    const Baz = {template:`<h1>Baz区域</h1>`}
    const Foo = {template:`<h1>Foo区域</h1>`}
    const routes = [
      {
        path:'/',
        components:{
          default:Foo,
          a:Bar,
          b:Baz
        }
      }
    ]
    const router = new VueRouter({routes})
    const app = new Vue({
      router
    }).$mount('#app')
  </script>

const routes = [
  {path:'/news',name:'news',component:News},
  //访问/a，会重定向到/news
  // {path:'/a',redirect:'/news'}
  // {path:'/a',redirect:{name:'news'}}
  {path:'/a',redirect:to => {
    console.log(to);
    return {name:'news'}
  }}
]

const routes = [
  //访问/a，URL仍会保持为/a，但显示和/news一样
  {path:'/news',name:'news',component:News,alias:'/a'}
]

//引入中文文件
import { zhHans } from 'vuetify/lib/locale'

//添加到Vuetify配置中
export default new Vuetify({
	lang: {
		current: `zhHans`,
		locales: { zhHans }
	}
})

<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>

.text-no-wrap

  <v-slide-x-transition>
    <v-card outlined tile v-if="isShow">
      <v-card-title>我是一个卡片标题</v-card-title>
    </v-card>
  </v-slide-x-transition>
  <v-btn color="primary" @click="isShow = !isShow">切换</v-btn>

  <div class="text-center" transition="slide-x-transition">
    <v-menu offset-y>
      <template v-slot:activator="{ on, attrs }">
        <v-btn color="primary" dark v-bind="attrs" v-on="on">
          Dropdown
        </v-btn>
      </template>
      <v-list>
        <v-list-item v-for="(item, index) in items" :key="index" @click=""> 
          <v-list-item-title>{{ item.title }}</v-list-item-title>
        </v-list-item>
      </v-list>
    </v-menu>
  </div>

import Vue from 'vue'
import { createSimpleTransition } from 'vuetify/lib/components/transitions/createTransition'

const myTransition = createSimpleTransition(`my-transition`)

Vue.component(`my-transition`, myTransition)

//style
.my-transition-leave-active,
.my-transition-enter-active {
  transition: all 1s;
}
.my-transition-enter,
.my-transition-leave-to {
  opacity: 0;
}
//html
  <my-transition>
    <v-card outlined tile v-if="isShow">
      <v-card-title>卡片标题</v-card-title>
    </v-card>
  </my-transition>
  <v-btn color="primary" @click="isShow = !isShow">切换</v-btn>

<v-row no-gutters>
  <v-col cols="12" sm="6" class="my-sm-0 my-2">
    <v-card class="pa-2" outlined tile>
      栅格
    </v-card>
  </v-col>
  <v-col cols="12" sm="6" class="my-sm-0 my-2">
    <v-card class="pa-2" outlined tile>
      栅格
    </v-card>
  </v-col>
</v-row>

headers: [
	{ text: `姓名`, value: `name` },
	{ text: `性别`, value: `gender` },
	{ text: `年龄`, value: `age` }
],
items: [
	{ name: `小明`, gender: `男`, age: 12 },
	{ name: `小红`, gender: `女`, age: 22 },
	{ name: `小刚`, gender: `男`, age: 34 }
],

  <v-data-table
    show-select
    item-key="name"
    single-select
    :headers="headers"
    :items="items"
  ></v-data-table>

      {
        Bucket: s3Bucket,
        CopySource: encodeURI(join(`${s3Bucket}`,`${sourcePath}`).replace(/\\/g,'/')),
        Key: newPath, // 目标路径
      }

  <div id="vmA">当前数据：{{sharedState.message}}
    <button @click="setMessageAction('新数据')">更改数据</button>
    <button @click="clearMessageAction()">清除数据</button>
  </div>
  <div id="vmB">当前数据：{{sharedState.message}}</div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script>
    var store = {
      debug: true,
      state: {
        message: 'Hello!'
      },
      setMessageAction (newValue) {
        if (this.debug) console.log('setMessageAction triggered with', newValue)
        this.state.message = newValue
      },
      clearMessageAction () {
        if (this.debug) console.log('clearMessageAction triggered')
        this.state.message = ''
      }
    }

    var vmA = new Vue({
      el:'#vmA',
      data: {
        privateState: {},
        sharedState: store.state
      },
      methods:{
        setMessageAction(newValue){
          store.setMessageAction(newValue)
        },
        clearMessageAction(){
          store.clearMessageAction()
        }
      }
    })

    var vmB = new Vue({
      el:'#vmB',
      data: {
        privateState: {},
        sharedState: store.state
      }
    })
  </script>

  <div id="app">
    {{$store.state.count}}
    <button @click="increment">增加</button>
    <button @click="decrease">减少</button>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
  <script>
    const store = new Vuex.Store({
      state:{
        count:0
      },
      mutations:{
        increment(state){
          state.count++
        },
        decrease(state){
          state.count--
        }
      }
    })

    const app = new Vue({
      el:'#app',
      store,
      computed:{
        count(){
          return this.$store.state.count
        }
      },
      methods:{
        increment(){
          this.$store.commit('increment')
        },
        decrease(){
          this.$store.commit('decrease')
        }
      }
    })
  </script>

  <div id="app">
    {{message1}}
    {{message2}}
    {{message3}}
  </div>
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
  <script>

    const store =new Vuex.Store({
      state:{
        message1:'消息1',
        message2:'消息2',
        message3:'消息3',
      }
    })

    const app = new Vue({
      el:'#app',
      store,
      computed:{
        message1(){
          return this.$store.state.message1
        },
        message2(){
          return this.$store.state.message2
        },
        message3(){
          return this.$store.state.message3
        },
      }
    })
  </script>

  computed:{
    //数组形式
    ...Vuex.mapState(['message1','message2','message3'])
    //对象形式
    ...Vuex.mapState({
      msg1:'message1',
      msg2:'message2',
      msg3:'message3',
    }),
  }

const store =new Vuex.Store({
  state:{
    todos: [
      { id: 1, text: '事项1', done: true },
      { id: 2, text: '事项2', done: false },
      { id: 3, text: '事项3', done: false },
      { id: 4, text: '事项4', done: true },
      { id: 5, text: '事项5', done: true },
    ]
  },
  getters:{
    doneTodos(state){
      return state.todos.filter(todo=>todo.done)
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  }
})
const app = new Vue({
  el:'#app',
  store,
  computed:{
    doneTodos(){
      return this.$store.getters.doneTodos
    },
    doneTodosCount(){
      return this.$store.getters.doneTodosCount
    }
  }
})

  getters:{
    doneTodos(state){
      return state.todos.filter(todo=>todo.done)
    },
    doneTodosCount(state, getters) {
      return getters.doneTodos.length
    },
    getTodoById:(state) => (id)=>{
      return state.todos.find(todo=>todo.id === id)
    }
  }

    //使用mapGetters
    ...Vuex.mapGetters(['doneTodos','doneTodosCount','getTodoById'])

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
const app = new Vue({
  el:'#app',
  store,
  computed:{
    ...Vuex.mapState({
      count:'count',
    }),
  },
  methods:{
    increment(){
      this.$store.commit('increment')
    }
  }
})

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state,payload) {
      state.count += payload.amount
    }
  }
})
const app = new Vue({
  el:'#app',
  store,
  computed:{
    ...Vuex.mapState({
      count:'count',
    }),
  },
  methods:{
    increment(){
      this.$store.commit('increment' ,{
        amount: 10
      })
    }
  }
})

  this.$store.commit({
    type: 'increment',
    amount: 10
  })

state.obj = { ...state.obj, newProp: 123 }
//或者
state.obj = Object.assign({},state.obj,newProp:123)

  methods:{
    //数组形式
    ...Vuex.mapMutations(['increment']),
    //对象形式
    ...Vuex.mapMutations({
      incre:'increment'
    }),
  }

const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state,payload) {
      state.count += payload.amount
    }
  },
  actions:{
    increment({commit},payload){
      setTimeout(()=>{
        commit('increment',payload)
      },1000)
    }
  }
})
const app = new Vue({
  el:'#app',
  store,
  computed:{
    ...Vuex.mapState({
      count:'count',
    }),
  },
  methods:{
    increment(){
      this.$store.dispatch('increment',{amount:10})
    }
  }
})

  //以载荷的形式触发
  this.$store.dispatch('increment',{amount:10})
  //以对象的形式触发
  this.$store.dispatch({
    type: 'increment',
    amount: 10
  })

//数组形式
...Vuex.mapActions(['increment']),
//对象形式
...Vuex.mapActions({
  add:'increment'
}),

modules: {
  foo: {
    namespaced: true,

    getters: {
      // 在这个模块的 getter 中，`getters` 被局部化了
      // 你可以使用 getter 的第四个参数来调用 `rootGetters`
      someGetter (state, getters, rootState, rootGetters) {
        getters.someOtherGetter // -> 'foo/someOtherGetter'
        rootGetters.someOtherGetter // -> 'someOtherGetter'
      },
      someOtherGetter: state => { ... }
    },

    actions: {
      // 在这个模块中， dispatch 和 commit 也被局部化了
      // 他们可以接受 `root` 属性以访问根 dispatch 或 commit
      someAction ({ dispatch, commit, getters, rootGetters }) {
        getters.someGetter // -> 'foo/someGetter'
        rootGetters.someGetter // -> 'someGetter'

        dispatch('someOtherAction') // -> 'foo/someOtherAction'
        dispatch('someOtherAction', null, { root: true }) // -> 'someOtherAction'

        commit('someMutation') // -> 'foo/someMutation'
        commit('someMutation', null, { root: true }) // -> 'someMutation'
      },
      someOtherAction (ctx, payload) { ... }
    }
  }
}

  actions: { 
    increment:{
      root:true,
      handler({rootState}){
        rootState.count++
      }
    }
  },

...Vuex.mapState('a',{
  aCount:'count'
})

import { getNewsList } from '@/api/News'
import Store from '@/store'
export default {
	namespaced:true,
	state:{
		newsList:[]
	},
	getters:{
		getNewsList(state){
			if(state.newsList.length===0){
				Store.dispatch(`news/getNewsList`)
			}
			return state.newsList
		},
		getNews: (state,getters) => (param)=>{
			return getters.getNewsList.find(item=>``+item.id === ``+param.id)
		},
		getNewsbyTitle: (state,getters) => (param)=>{
			return getters.getNewsList.filter((item) => {
				return item.title.indexOf(param.key) !== -1
			})
		}
	},
	mutations:{
		getNewsList(state,newsList){
			state.newsList = newsList
		}
	},
	actions:{
		async getNewsList({commit}){
			const newsList = await getNewsList()
			commit(`getNewsList`,newsList)
		}
	}
}

修改/etc/selinux/config 文件
将SELINUX=enforcing改为SELINUX=disabled
//然后重启vps

export CF_Key="Global API Key"
export CF_Email="cloudflare账号的emali"

1. ~/.acme.sh/acme.sh --issue --dns dns_cf -d 域名 -d *.域名
2. mkdir /root/cert
3. ~/.acme.sh/acme.sh --installcert -d 域名 --key-file /root/cert/private.key --fullchain-file /root/cert/cert.crt
4. ~/.acme.sh/acme.sh --upgrade --auto-upgrade
5. chmod -R 755 /root/cert

echo "net.core.default_qdisc=fq" >> /etc/sysctl.conf
echo "net.ipv4.tcp_congestion_control=bbr" >> /etc/sysctl.conf
sysctl -p

sysctl -n net.ipv4.tcp_congestion_control
lsmod | grep bbr

//回退到上一个版本
git reset --hard HEAD^
//回退到上上个版本
git reset --hard HEAD^^
//回退到上100个版本
git reset --hard HEAD~100
//回退到指定版本
git reset --hard <指定版本号前几位>

/mtk/ 过滤整个文件夹
*.zip 过滤所有.zip文件
/mtk/do.c 过滤某个具体文件