前端学习十一(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: {
  }
})
View Code

(2)vue组件中的使用的2种方式

<!-- 使用vuex中定义的数据 -->
<h1>{{ $store.state.name }}</h1>
<!-- 全局计算属性的使用 -->
<h1>a*b={{ $store.getters.c }}</h1>
<!-- 调用mutations中的方法 -->
<button @click="$store.commit('addNum')">+</button>
<!-- 调用actions中的方法 -->
<button @click="$store.dispatch('getProjects')">获取项目</button>
<script>
import { mapState, mapGetters, mapMutations,mapActions } from 'vuex'
export default {
    methods: {
        // 调用全局方法的另一种形式
        ...mapMutations(['addNum']),
        ...mapActions(['addNum']),
    },
    computed: {
        // 通过计算属性 返回vuex中定义的全局数据
        // name() {
        //     return this.$store.state.name
        // },

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

练习时的文件内容

<template>
    <div>
        <!-- 使用vuex中定义的数据 -->
        <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>

        <!-- 调用全局的方法修改state中的数据 -->
        <button @click="$store.commit('addNum')">+</button>
        <br>
        <button @click="addNum">+</button>

        <!-- 调用actions中的方法 -->
        <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>
View Code

 二、编译运行

前提:安装了node.js、create-vue脚手架工具

 

npm install报错 certificate has expired

1、取消ssl验证:
 
npm config set strict-ssl false
 
这个方法一般就可以解决了。
 
 
2、更换npm镜像源:
 
npm config set registry http://registry.cnpmjs.org
npm config set registry http://registry.npm.taobao.org

npm run serve报错  Error: error:0308010C:digital envelope routines::unsupported

主要是因为 nodeJs V17 版本发布了 OpenSSL3.0 对算法和秘钥大小增加了更为严格的限制,nodeJs v17 之前版本没影响,但 V17 和之后版本会出现这个错误

新增 SET NODE_OPTIONS=--openssl-legacy-provider


"scripts": {
"serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
 
"build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
 
}

 三、修改端口

在项目根目录下新建vue.config.js文件

module.exports = {
    devServer: {
        port: 3000
    }
}

 

posted @ 2021-12-20 11:13  whitewall  阅读(300)  评论(1)    收藏  举报