Vue.js 从入门到实战：轻松掌握组件、Vuex状态管理和Vue 3响应式编程

const app = new Vue({ el: '#app', data: {

message: 'Hello Vue!'

} })

Vue.component('my-button', { template: '点击我' })

import Vue from 'vue' import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({ state: {

cartItems: [],
userInfo: null

}, mutations: {

ADD_TO_CART(state, product) {
  state.cartItems.push(product)
}

}, actions: {

addToCart({ commit }, product) {
  commit('ADD_TO_CART', product)
}

} })

import Vue from 'vue' import VueRouter from 'vue-router' import Home from './views/Home.vue' import About from './views/About.vue'

Vue.use(VueRouter)

const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]

const router = new VueRouter({ routes })

import { ref, reactive } from 'vue'

export default { setup() {

const count = ref(0)
const state = reactive({
  name: 'Vue 3',
  version: '3.0'
})

function increment() {
  count.value++
}

return {
  count,
  state,
  increment
}

} }