Project structures,

  • Set up a project using VUE-CLI and select the vuE3 configuration
  • Introduce some basic plug-insvuex,vue-router,axiosUI we chose to useelement-plus
  • Configuration aspects are created under the root directoryvue.config.jsFile, refer to official documentationVue. Config configuration
  • Modify main.ts to introduce element-plus
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')
Copy the code

Basic knowledge of

setup

  • Vue3 retains almost all component properties in VUe2, such as data,created,methods, and so on
  • The setup attribute is added, and the execution time is between beforeCreate and created. Without this, it cannot be used in series with vue2’s data and methods
  • Setup passes in a function that allows you to return parameters for the page to use
  • You can also use lifecycle functions in setup, such as onMounted, onUpdated, onUnmounted, etc
import { onMounted } from 'vue' // ... Setup () {onMounted(() => {console.log(' execute after the first page loads ')})}Copy the code

Reactive and REF, shallowReactive and shallowRef – Reactive data

Used to create status values

Reactive is used to create normal objects, arrays, or other custom objects. Note that you cannot create the base type state, and you must assign values directly to create other types of states to update the page (such as Date).

Refs are commonly used to create refs of the base type, dom

Const r = reactive({value: a}) = reactive({value: a})

Reactive and REF both create deeply responsive data objects that modify deep data or update page views

< the template > < div > < div > {{num}} < / div > < div > {{state}} < / div > < div ref = "divRef" / > < el - button @ click = "change" > click < / el - button > </div> </template> import { reactive, ref } from 'vue' // ... Setup () {const num = ref(0) const divRef = ref(null) const state = reactive({name: 'c ', age: 12, orgIds: [' 1 ', '2']}) function change () {num.value += 1 state.name = '3' state.age = 14 state.orgIds[0] = '3 console.log(divRef.value) console.log(num.value) console.log(state.name) } return { num, divRef, state, change } }Copy the code

Run the code above and click the button to see that the data changes and the page refreshes

ShallowReactive and shallowRef create shallow responsive data objects. State.org Ids[0] = ‘3’ does not update the interface

WatchEffect, Watch-listener

  • Used to listen for data, and when part of the data being listened for is modified, a partial method is executed, returning a method that stops listening

  • The differences between watchEffect and Watch are:

1. Watch is not executed at creation time, but only when the listening state changes, whereas watchEffect is executed immediately

2. The first argument to watch requires passing in either a listening object or a function that returns the listening object. WatchEffect does not

< the template > < div > < h1 > watch - the listener < / h1 > < p > count1: {{data. Count1}} < / p > < p > count2: {{data.count2}}</p> <button @click="stopAll">Stop All</button> </div> </template> import { reactive, watch } from "vue" setup() { const data = reactive({ count1: 0, count2: 0}) const stop = watchEffect(() => console.log(' listener: ${data.count} ')) // Listen on a single data source const stop1 = watch(data, () => console.log("watch1", data.count1, Count2)) // Listen on multiple data sources const stop2 = watch([data.count1, data.count2], (now, bef) => {console.log(now, bef) Bef) // now indicates the current state, Log ("watch2", data.count1, data.count2)}) setInterval(() => {data.count1++}, 1000) return {data, stopAll: () => { stop() stop1() stop2() } } }Copy the code

Pay attention to the value of the listener

vuex 4

  • State of the state
state: {
    count: 0
},
Copy the code

Mutations change the status (must be synchronized)

mutations: {
    increment (state, payload) {
      console.log(payload)
      state.count++
    }
},
Copy the code
  • Actions can write asynchronous methods, can not directly modify the status value, must be modified through mutations, using scenarios, you can write interface queries here, and then query data stored in the store
actions: { incrementAsync ({ commit }, { payload }) { console.log(payload) setTimeout(() => { commit('increment', 'payload') }, 1000)}}Copy the code
  • Getters is similar to calculating properties
getters: {
	getCount (state) {
    	return state.count
    }
}
Copy the code

Page using

import { useStore } from 'vuex' // ... Setup () {const store = useStore() // This method does not have to be used in setup. Unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock unlock 'payload') call actions method}Copy the code
  • Modules Modularizes the status

Create the moduleA.ts file in the store folder

// store/index.ts import { createStore } from 'vuex' import moduleA from './moduleA' export default createStore({ // ...  Modules: {moduleA // Module name moduleA},})Copy the code
// store/moduleA.ts import { Module } from 'vuex' const moduleA: Module<{countA: number}, any> = { namespaced: Status: {countA: 0}, mutations: { increment (state, payload) { console.log(payload, state) state.countA++ } }, getters: { getCountA (state) { return state.countA } }, modules: {} } export default moduleACopy the code

Then use it on the page instead

store.state.moduleA.countA
store.commit('moduleA/increment', 'hhh')
Copy the code

You can also create modules for moduleA or moduleAA

Store.com MIT (' moduleA/moduleAA/increment ', 'HHH) / / until the last a slash in front is a namespace, finally after a slash to the status of the space below or methodsCopy the code
  • Note: the page is not refreshed after the store.state state changescomputed
const count = computed(() => store.state.count)
Copy the code

vue-router 4

import { useRoute, UseRouter} from 'vue-router' const route = useRoute() const router = useRouter(Copy the code

The router also contains methods such as addRoute and removeRoute, which can be used for dynamic routing or permission control

The resources

  • Vue3 official document
  • Vue3 Finch language related documents
  • Vuex official document
  • Vue-router Official document
  • zhuanlan.zhihu.com/p/225302263