前端学习十一（vuex、项目编译）

一、VUEX（个人理解是多个vue组件数据共享时使用）

vuex文档： https://next.vuex.vuejs.org/

1、环境准备

（1）安装依赖　　 npm install vuex --save

（2）安装插件　　vue ui中安装插件vuex （会新建一个store的文件夹，且main.js也会自动导入store）

2、vuex的核心概念（state、getters、mutations、actions）

其实文档挺详细的，下面主要是对vuex的4个核心概念比较常用的内容介绍（modules主要是大型项目的时候使用，就不说了）

（1）src/store文件夹下index.js文件示例

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 用来定义全局的数据(多组件共用的数据) 不能双向绑定，修改只能通过mutations
  state: {
  },
  // 定义全局的计算属性
  getters: {
  },
  // 定义全局的方法（不能定义异步的方法），也只有这里能修改state中的数据
  mutations: {
  },
  // 定义全局的异步方法（比如请求接口获取全局数据的方法），只能通过操作mutations来修改state
  actions: {
  },
  modules: {
  }
})

练习时的文件内容

import Vue from 'vue'
import Vuex from 'vuex'
import req from '../api/req.js'

Vue.use(Vuex)

export default new Vuex.Store({
  // 用来定义全局的数据(多组件共用的数据) 不能双向绑定，修改只能通过mutations
  state: {
    projects: ['1', '2', '3'],
    name: 'vuex中的name字段',
    a: 2,
    b: 5
  },
  // 定义全局的计算属性
  getters: {
    c(state) {
      return state.a * state.b
    }
  },
  // 定义全局的方法（不能定义异步的方法），也只有这里能修改state中的数据
  mutations: {
    addNum(state) {
      state.a++
    },
    // 修改state.projects的方法，给下面异步方法用
    updateProjects(state, data) {
      state.projects = data
    }
  },
  // 定义全局的异步方法（比如请求接口获取全局数据的方法），只能通过操作mutations来修改state
  actions: {
    async getProjects(content) {
      const r = await req.getProjects()
      // console.log(r.data.results)
      content.commit('updateProjects', r.data.results)
    }
  },
  modules: {
  }
})

（2）vue组件中的使用的2种方式

<h1>{{ $store.state.name }}h1>

<h1>a*b={{ $store.getters.c }}h1>

<button @click="$store.commit('addNum')">+button>

<button @click="$store.dispatch('getProjects')">获取项目button>

练习时的文件内容

<template>
    <div>
        
        <h1>{{ name }}h1>
        <h1>{{ $store.state.name }}h1>
        <h1>{{ projects }}h1>

        
        <h1>a={{ a }}h1>
        <h1>a={{ b }}h1>
        <h1>a*b={{ $store.getters.c }}h1>
        <h1>{{ c }}h1>

        
        <button @click="$store.commit('addNum')">+button>
        <br>
        <button @click="addNum">+button>

        
        <button @click="$store.dispatch('getProjects')">获取项目button>
        <br>
        <button @click="getProjects">获取项目button>
    div>
template>

<script>
import { mapState, mapGetters, mapMutations,mapActions } from 'vuex'
export default {
    data() {
        return {}
    },
    methods: {
        // 调用全局方法的另一种形式
        ...mapMutations(['addNum']),
        ...mapActions(['addNum']),
    },
    components: {},
    mounted() {},
    computed: {
        // 通过计算属性 返回vuex中定义的全局数据
        // name() {
        //     return this.$store.state.name
        // },

        // 使用对象展开运算符将此对象混入到外部对象中
        ...mapState(['name', 'projects', 'a', 'b']),
        ...mapGetters(['c']),
    },
    created(){}
}
script> 

<style scoped>
style>

 二、编译运行

1、项目根目录下运行如下命令，会生成dist文件

npm run build

2、将上面的dist文件拷出来放到一个文件夹下（假设叫A文件夹），并在A下执行以下命令，用于初始化一个包管理文件，会生成package.json文件

npm init -y

3、在A下执行如下命令，安装express，安装完之后会生成package-lock.json文件

npm install express -g

4、在A下创建app.js文件

// 引用express
const express = require('express')
// 创建一个应用程序对象
const appe=express()
// 指定静态文件路径
appe.use(express.static('./dist'))
// 监听端口
appe.listen(8888,()=>{
console.log("服务已启动=======");
})

5、使用node的方式启动项目(如果关掉窗口就会关闭服务)

node app.js

6、使用pm2的方式启动项目（项目名称自己取）

pm2 start app.js --name 项目名称

关于pm2

安装(要加-g，不然cmd识别不来pm2 命令)

npm install pm2 -g

停止项目

pm2 stop 项目名称

删除项目

pm2 delete 项目名称

查看项目

pm2 list