vueJS07 vuex与mysql

修改npm的镜像源

npm config set registry https://registry.npm.taobao.org

npm config list 查看源的信息了

1.Vuex
Vuex是一套公共的状态管理方案，能够进行多组件之间的数据共享。

组件之间通信的方式：
1.父传子
2.子传父
3.中央事件总线
4.this.$refsthis.$parent
5.provide inject
6.Vuex

1.1vuex的使用步骤
//1.安装vuex
npm i vuex –S

//2.在main.js中创建一个store仓库(保持了共享的状态)
import Vuex from ‘vuex’

Vue.use(Vuex)

var store = new Vuex.Store({
    state:{
        count:100
    },
    mutations:{
        increment(state){
            state.count++;
        },
        sub(state){
            state.count–;
        }
    }
})

//3.把store挂载到vm实例中
//把store挂载到vuex中
var vm = new Vue({
    el:"#app",
    router,
    store,
    render©{
        return c(App)
    }
})

//4.在组件中使用vuex共享的数据了
//4.1 在页面中使用 {{KaTeX parse error: Expected 'EOF', got '}' at position 18: …ore.state.count}̲} //4.2 在js代码中…store.state.count
//4.3 如果要修改vuex中的state
this.$store.commit(“mutation的名字”)

1.2vuex的核心概念
State 存放需要被组件共享的数据
Mutations 修改state的唯一途径，是一个方法，会把state作为参数传进来
Actions 类似mutation，允许有异步操作，我们需要在action中commit提交mutations
Getters 从state中派生出来的一些状态
Module 我们可以把store分成若干模块

1.3vuex使用的注意点

// 总结：
// 1. state中的数据，不能直接修改，如果想要修改，必须通过 mutations
// 2. 如果组件想要直接 从 state 上获取数据： 需要 this.$store.state.\ast \ast \ast //3.如果组件想要修改数据，必须使用mutations提供的方法，需要通过this.$store.commit(‘方法的名称’， 唯一的一个参数)
// 4. store中state上的数据在对外提供的时候建议做一层包装，推荐使用 getters。调用的时候则用this.$store.getters.***
// 5. 如果在修改store中的数据的时候，有异步操作，那么我们可以使用actions来完成

1.4 Vuex的数据缓存
原理：每一次提交修改state数据的时候，都把这个数据存到localstorage中

//1.安装vuex-persistedstate插件
npm i -S vuex-persistedstate
//2.在store中引入插件，并且配置到new Vuex.Store实例中
import persistedState from ‘vuex-persistedstate’
var store = new Vuex.Store({
………
    plugins:[persistedState()]
})

2.vue/cli脚手架的使用
2.1 基本使用
//1.全局安装vue/clig
npm install -g @vue/cli@3.9.1

//2.使用脚手架创建项目
vue create project_name

//3.vue/cli项目目录结构

//4.启动项目
进入项目根目录，输入 npm run serve

//5.查看默认的配置
在项目根据路下输入 vue inspect > output.js

2.2 eslint的使用
ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。

extends: [
    ‘plugin:vue/recommended’,
    ‘@vue/standard’
 ],

vue/recommended 这个插件可以帮我们检测vue的模块的js代码的问题

eslint的规则参照代码

//修复错误
npm run lint --fix

//关闭保存代码之后自动使用eslint检测代码的问题 vue.config.js
// vue.config.js
module.exports = {
  lintOnSave: true
}

Mysql 的问题： (没有装过mysql的同学做)
1.安装wamp
2.启动wamp (有可能启动之后不是绿色)
3.进入wamp安装目录下的mysql文件下的bin目录
G:\program files\wamp\bin\mysql\mysql5.6.12\bin

打开命令行，输入命令 mysql -u root -p
如果没有设置过密码，密码应该为空

如果能看到下面的页面，说明mysql服务器启动了

4.安装sqlyog (如果之前有同学装过了navicat就不需要做了)
5.安装sqlyog的时候，激活码就在文件夹的sn.txt中
6.启动sqlyog，连接数据库

7.数据库连接成功之后，在vue项目的 资料文件夹下，有一个vuecms3_nodejsapi文件夹
找到文件夹下的 dtcmsdb4.sql文件，打开，复制所有代码，黏贴到query中，然后ctrl+a选中所有代码，点击三角形执行代码

8.打开vuecms3_nodejsapi文件夹下面src下面的app.js 添加自己数据库的账号和密码
const orm = require(‘orm’);
app.use(orm.express(‘mysql://root:root@127.0.0.1:3306/dtcmsdb4’,{
define:function(db,models,next){

	next();
}

}));
9.在vuecms3_nodejsapi文件夹下面src路径下面打开命令行，输入 node app命令启动node服务器 如果看到下面，说明服务器启动成功 （注意：这个node窗口不能关闭）

10.来到vue-cms这个文件夹下，修改文件夹下的vue.config.js，把host后面换成
host: ‘localhost’,

devServer: {
open: true,
host: ‘192.168.0.101’,
port: 3000,
https: false,
hotOnly: true,
//配置代理服务器
proxy: {
//凡是请求以api开头的都会使用下面的代理服务器
‘/api/*’: {
target: ‘http://localhost:8899/’, // 目标服务器地址
secure: false, // 目标服务器地址是否是安全协议
changeOrigin: true, // 是否修改来源, 为true时会让目标服务器以为是webpack-dev-server发出的请求!服务端和服务端的请求是没有跨域的
//pathRewrite: {’^/api’: ‘/’} // 将/api开头的请求地址, /api 改为 /, 即 /api/xx 改为 /xx
}
}
},

11.打开命令行，输入命令 npm run serve，如果能看到程序页面和数据，说明环境正确