vue---day04

1. Node.js
    1.1 介绍：
        - Node.js 是一个JavaScript运行环境，实质上是对Chrome V8引擎的封装。
        - Node.js 不是一个 JavaScript 框架，不同于Django。Node.js 更不是前端的库，不能与 jQuery、ExtJS 相提并论。
        - Node.js 是一个让 JavaScript 运行在服务端的开发平台，它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
    1.2 安装：
        直接去官网下载安装 https://nodejs.org/en/
    1.3 运行测试
        开始 -> 运行 -> cmd -> Enter
        查看版本：node --version
        打开：node
        测试：console.log('Hello node')
        退出：.exit
2. npm
    2.1 介绍
        任何计算机编程语言都包含了丰富的第三方库，比如Python，pip是python的第三方库管理工具。而npm是JavaScript这么语言的第三方库管理工具。
    2.2 检测
        装好node.js之后，默认已经安装好了npm包管理工具。可以输入npm命令机械能测试。
    2.3 基本命令
        - 初始化：
            npm init --y
        - 安装：
            全局：npm install -g <package>
            局部：
                npm install <package> --save
                npm install <package> --save-dev
        - 卸载
            全局：npm uninstall <package> -g
            局部：
                npm uninstall <package> -S
                npm uninstall <package> -D
3. vue-cli
    3.1 安装
        npm install -g vue vue-cli
    3.2 新建项目
        3.2.1 初始化
            vue init webpack mydemo
        3.2.2 根据提示输入：
            Project name mydemo
            ? Project description A
            ? Author
            ? Vue build standalone
            ? Install vue-router? Yes
            ? Use ESLint to lint your code? No
            ? Set up unit tests No
            ? Setup e2e tests with Nightwatch? No
            ? Should we run `npm install` for you after the project has been created? (recommended) npm
        3.2.3 根据提示启动
            cd mydemo
            npm run dev
    3.3 运行
         I  Your application is running here: http://localhost:8080
        浏览器访问127.0.0.1:8080
4. vuex
    4.1 安装使用
        - 第一步：Vue中使用Vuex
            Vue.use(Vuex);
        - 第二步：实例化一个store对象
            let store = {
                state:{
                    name:'python',
                },
            };
        - 第三步：通过计算属性来获取store对象中的数据
            let App = {
                template:`
                    <div>
                        <h1>{{ name }}</h1>
                    </div>
                `,

                computed:{
                    name(){
                        return this.$store.state.name
                    },
                },
            };
        - 第四步：注册到根实例当中
            new Vue({
                el:"#app",
                template:`<App/>`,
                components:{
                    App,
                },
                store:store,
            );
    4.2 getters：获取
        let store = new Vuex.Store({
            state: {
                name: '子牙',
                age:22,
            },
            getters:{
                getAge(state){
                    return state.age + 10
                }
            },
        });
        let App = {
            template: `
                <div>
                    <h1>{{ name }}</h1>
                    <h1>{{ age }}</h1>

                </div>
              `,
            computed:{
                name(){
                  return this.$store.state.name;
                },
                age(){
                    return this.$store.getters.getAge;
                },
            },
        };
    4.3 mutations：修改
         let store = new Vuex.Store({
            state: {
                name: '子牙',
                age: 22,
                score: 88,
            },
            getters:{
                getAge(state){
                    return state.age + 10
                }
            },
            mutations:{
                changeScore(state,payload){
                    this.score += payload
                }
            },
        });
         let App = {
            template: `
                <div>
                    <h1>{{ name }}</h1>
                    <h1>{{ age }}</h1>
                    <h1>{{ score }}</h1>

                    <button @click="changeScore">点击修改分数</button>
                </div>
              `,
            computed:{
                name(){
                  return this.$store.state.name;
                },
                age(){
                    return this.$store.getters.getAge;
                },
                score(){
                    return this.$store.state.score;
                }
            },
            methods:{
                changeScore(){
                    this.$store.commit('changeScore',2)
                }
            }
        };

    4.4 actions:
        let store = new Vuex.Store({
            state: {
                name: '子牙',
                age: 22,
                score: 88,
            },
            getters:{
                getAge(state){
                    return state.age + 10
                }
            },
            mutations:{
                changeScore(state,payload){
                    this.score -= payload
                },
                addScore(state,payload){
                    this.score += payload
                },
            },
            actions:{
                addScore(context,payload){
                    setInterval(() => context.commit('addScore',payload),3000);
                }
            },
        });
         let App = {
            template: `
                <div>
                    <h1>{{ name }}</h1>
                    <h1>{{ age }}</h1>
                    <h1>{{ score }}</h1>

                    <button @click="changeScore">点击修改分数</button>
                    <button @click="addScore">点击增加分数</button>
                </div>
              `,
            computed:{
                name(){
                  return this.$store.state.name;
                },
                age(){
                    return this.$store.getters.getAge;
                },
                score(){
                    return this.$store.state.score;
                }
            },
            methods:{
                changeScore(){
                    this.$store.commit('changeScore',2)
                },
                addScore(){
                    this.$store.dispath('addScore',1)
                }
            }
        };