人类高质量Vue学习笔记（六）

前端

2024-01-07 02:06:27

npm 常用命令

安装和卸载包

npm install <package-name>：安装一个包
npm uninstall <package-name>：卸载一个包

查看已安装的包

npm ls：列出所有已安装的包
npm list <package-name>：列出指定包的详细信息

更新包

npm update <package-name>：更新指定包到最新版本
npm update -g <package-name>：更新全局安装的包

管理依赖关系

npm install --save <package-name>：将包添加到项目依赖关系中
npm install --save-dev <package-name>：将包添加到开发依赖关系中
npm install --peer <package-name>：将包添加到对等依赖关系中

其他常用命令

npm start：运行项目脚本中的 "start" 命令
npm run <script-name>：运行项目脚本中的指定命令
npm init：初始化一个新的项目
npm audit：检查项目依赖关系中的安全漏洞

Vuex 详解

Vuex 是一个用于管理 Vue.js 应用状态的集中式存储库。它提供了以下优势：

状态管理集中化，便于维护和管理
支持状态的可预测变化，避免意外副作用
方便进行时间旅行调试和状态回滚

基本概念

状态： 应用中需要管理的数据
变更： 修改状态的操作
模块： 将状态和变更组织成逻辑分组
动作： 提交变更的函数

使用 Vuex

安装 Vuex： npm install vuex
创建 Vuex 实例：

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

Vue.use(Vuex)

const store = new Vuex.Store({
  // state, getters, mutations, actions
})

在组件中使用 Vuex：

import { mapState, mapActions } from 'vuex'

export default {
  computed: mapState([
    'stateProperty1',
    'stateProperty2',
  ]),
  methods: mapActions([
    'mutationMethod1',
    'actionMethod2',
  ]),
}

实例代码

// 创建 Vuex 实例
const store = new Vuex.Store({
  state: {
    count: 0,
    todos: [],
  },
  mutations: {
    incrementCount(state) {
      state.count++
    },
    addTodo(state, todo) {
      state.todos.push(todo)
    },
  },
  actions: {
    incrementCountAsync({ commit }) {
      setTimeout(() => {
        commit('incrementCount')
      }, 1000)
    },
    addTodoAsync({ commit }, todo) {
      setTimeout(() => {
        commit('addTodo', todo)
      }, 1000)
    },
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    },
  },
})

// 使用 Vuex
export default {
  computed: mapState([
    'count',
    'todos',
  ]),
  methods: mapActions([
    'incrementCountAsync',
    'addTodoAsync',
  ]),
}