Vue-cli与Vuexの学习笔记-白红宇

Vue-cli与Vuexの学习笔记

阅读量：3960 次

发布时间：2019-05-24

本文共 5805 字，大约阅读时间需要 19 分钟。

Vue-cli简单搭建

前提：已经安装node.js

安装cli：

npm install vue-cli –g

验证：vue –V （大写的V）

初始化

vue init 
    
    
     
      :模板名称
      
       :项目名字模板有以下几种，大部分都用第一种 `webpack`

在这里插入图片描述

初始化：vue init webpack 项目名字随意

npm install

验证：

npm run dev

在这里插入图片描述

安装成功！！

项目目录解读

|-- build                            // 项目构建(webpack)相关代码|   |-- build.js                     // 生产环境构建代码|   |-- check-version.js             // 检查node、npm等版本|   |-- dev-client.js                // 热重载相关|   |-- dev-server.js                // 构建本地服务器|   |-- utils.js                     // 构建工具相关|   |-- webpack.base.conf.js         // webpack基础配置|   |-- webpack.dev.conf.js          // webpack开发环境配置|   |-- webpack.prod.conf.js         // webpack生产环境配置|-- config                           // 项目开发环境配置|   |-- dev.env.js                   // 开发环境变量|   |-- index.js                     // 项目一些配置变量|   |-- prod.env.js                  // 生产环境变量|   |-- test.env.js                  // 测试环境变量|-- src                              // 源码目录|   |-- components                     // vue公共组件|   |-- store                          // vuex的状态管理|   |-- App.vue                        // 页面入口文件|   |-- main.js                        // 程序入口文件，加载各种公共组件|-- static                           // 静态文件，比如一些图片，json数据等|   |-- data                           // 群聊分析得到的数据用于数据可视化|-- .babelrc                         // ES6语法编译配置|-- .editorconfig                    // 定义代码格式|-- .gitignore                       // git上传需要忽略的文件格式|-- README.md                        // 项目说明|-- favicon.ico |-- index.html                       // 入口页面|-- package.json                     // 项目基本信息

Vuex

作用：

一个数据仓库，状态管理模式

将共用的属性，进行了共享，每个页面使用，直接调用就可以，避免了每次都需要调用后台！（类似session的作用）

安装：

npm install vuex --save

--save：应用到生产环境中，也就是添加到package.json的dependencies下面

简单实现加减实例

在src目录下创建vuex文件夹，并创建store.js

内容为：

import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);export default new Vuex.Store({
       state:{
           count:0    },    mutations:{
           add(state){
               state.count ++;        },        reduce(state){
               state.count --;        }    }})

然后在components目录下创建Count.vue内容：

同时修改路由，router目录下的index.js，添加如下代码

import Count from '@/components/Count'

{
         path:'/count',      component:Count}

然后执行npm run dev页面结果如下：

输入地址：http://localhost:8080/#/count

mutations:

书写改变状态值方法的地方

获取方法：

$store.commit('add')

state

在Count.vue的template的标签下添加：

{
   {
   count}}

目的是使：$store.state.count可以用count代替！

做法一：

在Count.vue内添加计算属性：

computed: {
       count () {
         return store.state.count    }  }

弊端：

这种模式导致组件依赖全局状态单例。在模块化的构建系统中，在每个需要使用 state 的组件中需要频繁地导入，并且在测试组件时需要模拟状态。

做法二：

将以下内容从Count.vue中裁剪到App.vue的对应位置；

import store from '../vuex/store';

computed: {
       count () {
         return store.state.count    }  }

{
   {
   count}}

效果同上！

弊端：

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

做法三：

在做法一的基础上：

引入：

import {
   mapState} from 'vuex';

将计算属性修改为：

computed:mapState({
           count:state=>state.count    })

或则修改为：

computed:mapState(['count'])

结果同上！！

对象展开运算符

待学习

传递参数

将store.js以下内容替换:

add(state,n){
               state.count +=n;        },

Count.vue也是；

这样就实现每次加10了！！

方法名简化

Count.vue内容添加：

import {
   mapState,mapMutations} from 'vuex';

methods:mapMutations(['add','reduce'])

效果一样！！

getter

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

store.js添加内容

getters:{
           count:state=>state.count+=10    }

Count.vue修改内容为：

computed:{
           ...mapState(['count']),        count(){
               return this.$store.getters.count        }        },

简化：

import {
   mapState,mapMutations,mapGetters} from 'vuex';

computed:{
           ...mapState(['count']),        ...mapGetters(['count'])        },

Action

store.js添加内容

actions:{
         addAction(context){
           context.commit('add',10);    },    reduceAction({
   commit}){
           commit('reduce');    }    },

Count.vue修改内容为：

额外添加摁妞

methods:{
               ...mapMutations(['add','reduce']),            ...mapActions(['addAction','reduceAction'])            }

Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

store.js添加内容

将下面内容全部放到新建的moduleA中：

export default new Vuex.Store({
       modules:{
   a:moduleA}   })

const moduleA ={
       state:{
           count:0    },    mutations:{
           add(state,n){
               state.count +=n;        },        reduce(state){
               state.count --;        }    },    getters:{
           count:state=>state.count+=1    },actions,}

同时Count.vue的template模板的count是接收不到的！！

只能下面代码可以接收：

{
   {
   $store.state.a.count}}

如果还有count接收，需要修改计算属性

computed: {
       count () {
         return store.state.a.count    }  }

因此该Module使用较少！

暂时结束，内容后续补充！！

最后的代码

store.js；

import Vue from "vue";import Vuex from "vuex";Vue.use(Vuex);const actions={
       addAction(context){
           context.commit('add',10);    },    reduceAction({
   commit}){
           commit('reduce');    }}const moduleA ={
       state:{
           count:0    },    mutations:{
           add(state,n){
               state.count +=n;        },        reduce(state){
               state.count --;        }    },    getters:{
           count:state=>state.count+=1    },actions,}export default new Vuex.Store({
       modules:{
   a:moduleA}   })

Count.vue代码