人类高质量vue学习笔记(六)

1 npm 常用命令

npm 是 Node.js 的包管理工具，主要用来安装各种库和依赖(插件)。

1.安装依赖

在讲解 npm 之前，我们先看一下 vue 脚手架项目的两个重要目录： node_modules 和 package.json。

node_modules：主要用来存放我们下载的依赖。

package.json：主要保存与项目相关的元数据，以及项目的依赖项、版本等。

(1) 普通安装方式

命令：

npm install 模块名

快捷键：

npm i 模块名

安装指定版本依赖：

npm i 依赖名@版本 
例如：
npm i vue@2.5.xx

这 3 个命令会将依赖安装到 node_modules 目录下面，但是不会往 package.json 文件中添加该依赖以及相关的版本。

啥意思呢，就是有一天别人从 gitee 或者 github 上拉取了你的代码，然后通过 npm install 命令安装所有依赖，但是不能安装你之前安装过的依赖。

为啥呢？

因为 package.json 文件没有记录这些依赖以及相关的版本。

(2) 安装开发阶段需要的依赖

npm install 依赖名 --save-dev

简写：

npm i 依赖名 -D

-save-dev 或者 -D 会将依赖安装到 node_modules 目录下，并在 package.json 文件的 devDependencies 节点中写入该依赖。

别人拿到你的代码之后，通过 npm install 命令会安装你之前安装过的依赖，因为 package.json 文件中记录的有这些依赖以及依赖的版本。

devDependencies 节点下的依赖是我们在开发过程中需要用的，在项目部署后运行时是不需要的。

所以对于开发中用到的依赖，我们可以使用 -save-dev 或者 -D 的形式进行安装。

(3) 安装项目运行阶段需要的依赖

npm install 依赖名 --save

简写：

npm i 依赖名 --save

-save 会将依赖安装到 node_modules 目录下，并在 package.json 文件的 dependencies 节点中写入该依赖。

别人拿到你的代码之后，通过 npm install 命令会安装你之前安装过的依赖。

dependencies 节点下的依赖是项目在运行过程中需要用的，所以我们应该使用 --save 形式进行安装。

2.卸载依赖

npm uninstall 依赖名

3.升级依赖

// 升级生产环境依赖包：
npm update 依赖名 --save

// 升级开发环境依赖包：
npm update 依赖名 --save-dev

2 Vuex 简介

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。说白了就是把一些共享的数据放到 vuex 中，任何组件都可以进行使用。

1 环境搭建

1.创建脚手架项目

我们先创建一个脚手架项目，这里是基于 Vue2.0 版本进行创建。

vue init webpack vuex-test

2.安装配置 vuex

npm i vuex@版本 --save

在 main.js 中配置 vuex

2 state

state 主要用来存放公共的属性。

1.定义 state

const store = new Vuex.Store({
  state: {
    name: '知否君',
    age: 23,
    college: '知否大学'
  }
})

2.获取属性

语法：

this.$store.state.属性值

例如：

<div class="zhifou">
  <p>姓名：{{ $store.state.name }}</p>
  <p>年龄：{{ $store.state.age }}</p>
  <p>学校：{{ $store.state.college }}</p>
</div>

3.计算属性

我们还可以将 state 的属性定义为计算属性：

<template>
  <div class="zhifou">
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <p>学校：{{ college }}</p>
  </div>
</template>
<script>
export default {
  name: "zhifou",
  data() {
    return {};
  },
  computed: {
    name() {
      return this.$store.state.name;
    },
    age() {
      return this.$store.state.age;
    },
    college() {
      return this.$store.state.college;
    },
  },
};
</script>

4.辅助函数

mapState 是 vuex 提供的一个辅助函数，它将 store 中的属性与组件中的计算属性相互对应，大大地简化了我们的开发。

使用方式：

(1)导入辅助函数：

import { mapState } from 'vuex'

(2)将 store 中的属性与组件中的计算属性相互对应

computed: {
    ...mapState(['属性名'])
  }

(3)使用：

<template>
  <div class="zhifou">
    <p>姓名：{{ name }}</p>
    <p>年龄：{{ age }}</p>
    <p>学校：{{ college }}</p>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "zhifou",
  data() {
    return {};
  },
  computed: {
    ...mapState(["name", "age", "college"]),
  },
};
</script>

3 getters

getters 可以看做是对 state 中数据的进一步过滤和封装。例如从一堆用户中查找年龄大于 12 岁的用户数据。

使用方式：

1.定义数据

state: {
  userList: [
    {
      name: '知否君',
      age: 23,
    }, {
      name: '柯南',
      age: 12,
    }, {
      name: '忍者',
      age: 18,
    }]
},

2.定义 getters

getters: {
    userList: state => state.userList.filter(item => item.age > 12),
  }

3.获取数据

<div>{{ $store.getters.userList }}</div>

4.辅助函数

mapGetters 是 vuex 提供的一个辅助函数。

使用方式：

(1)导入辅助函数：

import { mapGetters } from 'vuex'

(2)将 getters 中的属性与组件中的计算属性相互对应

 computed: {
    ...mapGetters(["userList"]),
  },

(3)使用

<template>
  <div class="zhifou">
    <p v-for="(user, index) in userList" :key="user.age">
      {{ index }}{{ user.name }}
    </p>
  </div>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "zhifou",
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userList"]),
  },
};
</script>

4 mutations

我们只能通过 mutations 中定义的方法修改 state 中的数据，并且 mutations 必须是同步的，也就是只要修改便立即响应。

1.定义 mutations

const store = new Vuex.Store({
  state: {
    age: 18,
  },
  mutations: {
    // 修改年龄方法
    // 第一个参数是 store 中的state属性
    // 第二个是传递的参数值
    addAge(state, param) {
      state.age += param
    }
  }
})

2.使用

this.$store.commit('方法名', 参数值) 

3.例如：

<template>
  <div class="zhifou">
    <span>年龄：{{ this.$store.state.age }}</span>
    <button @click="addAge()">+1</button>
  </div>
</template>

<script>
export default {
  name: "zhifou",
  data() {
    return {};
  },
  methods: {
    addAge() {
      this.$store.commit("addAge", 1);
    },
  },
};
</script>

4.辅助函数

mapMutations 是 vuex 提供的辅助函数，他将 mutations 中的方法映射到组件的方法中。

(1)导入辅助函数：

import { mapMutations } from 'vuex'

(2)将 mutations 中的方法映射到组件的方法中

methods: {
    ...mapMutations(['addAge'])
}

(3)使用

<template>
  <div class="zhifou">
    <span>年龄：{{ this.$store.state.age }}</span>
    <button @click="addAge(1)">+1</button>
  </div>
</template>

<script>
import  { mapMutations } from 'vuex'
export default {
  name: "zhifou",
  data() {
    return {};
  },
methods: {
    ...mapMutations(['addAge'])
}
};
</script>

5 actions

actions 主要用来进行异步操作。要想在 actions 中修改 state 的数据，必须要借助 mutations 中的方法。

1.定义 actions

const store = new Vuex.Store({
  state: {
    userList: [],
  },
  mutations: {
    updateUserList(state, param) {
      state.userList = param;
    }
  },
  actions: {
    // context 表示 store 实例
    async getUserList(context) {
      // const result = await axios.get('xxxx');
      let result = {
        data: {
          success: true, data: [
            {
              name: '知否君',
              age: 23,
            }, {
              name: '柯南',
              age: 12,
            }, {
              name: '忍者',
              age: 18,
            }]
        }
      };
      if (result.data.success) {
        context.commit('updateUserList', result.data.data);
      }
    }
  }
})

我们在 actions 中定义了一个异步方法，方法的参数 context 表示 store 实例。 context.commit() 表示调用 mutations 中的方法。

2.组件中调用 action 方法

 this.$store.dispatch(方法名，参数)；

3.例如：

<template>
  <div class="zhifou">
    <p v-for="(user, index) in userList" :key="user.age">
      {{ index+' '}}{{'姓名：' +user.name }}{{' 年龄：' +user.age }}
    </p>
  </div>
</template>
<script>
import { mapMutations } from "vuex";
export default {
  name: "zhifou",
  data() {
    return {};
  },
  created() {
    this.getUserList();
  },
  methods: {
    getUserList(){
       this.$store.dispatch('getUserList')
    }
  },
  computed: {
    userList () {
      return this.$store.state.userList;
    }
  }
};
</script>

4.辅助函数

mapActions 是 vuex 提供的辅助函数，他将 actions 中的方法映射到组件的方法中。

(1)导入辅助函数：

import { mapActions } from 'vuex'

(2)将 actions 中的方法映射到组件的方法中

methods: {
    ...mapActions(['getUserList'])
}

(3)使用

<template>
  <div class="zhifou">
    <p v-for="(user, index) in userList" :key="user.age">
      {{ index+' '}}{{'姓名：' +user.name }}{{' 年龄：' +user.age }}
    </p>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  name: "zhifou",
  data() {
    return {};
  },
  created() {
    this.getUserList();
  },
  methods: {
     ...mapActions(['getUserList'])
  },
  computed: {
    userLit () {
      return this.$store.state.userList;
    }
  }
};
</script>

6 模块化

为什么要模块化？

因为一个项目包含很多模块，例如员工模块、部门模块、订单模块等等。

不同模块的数据全都放在 state 中看起来眼花缭乱，不容易区分，所以 vuex 提出了模块化概念。

1.引入模块化

const store = new Vuex.Store({
  modules: {
    user: {
      namespaced: true,
      state: {
        name: '知否君',
        age: 18
      },
      mutations: {
        updateAge(state, param) {
          state.age += param;
        }
      }

    },
    order: {
      namespaced: true,
      state: {
        name: '知否君购买苹果订单'
      }
    }
  }
})

注：modules 是模块化的关键词。namespaced 是命名空间，表示独一无二的，用来区分不同的模块。

2.例如

<template>
  <div class="zhifou">
    <p>姓名：{{ $store.state.user.name }}</p>
    <p>
      年龄：{{ $store.state.user.age }} <button @click="addAge()">+1</button>
    </p>
    <p>订单名：{{ $store.state.order.name }}</p>
  </div>
</template>
<script>
export default {
  name: "zhifou",
  data() {
    return {};
  },
  methods: {
    // 调用 user 模块中的方法
    addAge() {
      this.$store.commit("user/updateAge",1); // 调用方法
    },
  },
};
</script>

注：调用 user 模块下的方法，前面需要加上模块名：‘user/updateAge’。