Vue-cli与Vuexの学习笔记

Vue-cli简单搭建

前提：已经安装node.js
安装cli：

npm install vue-cli –g

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

初始化

vue init <template-name> <project-name>
<template-name>:模板名称
<project-name>:项目名字
模板有以下几种，大部分都用第一种 `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内容：

<template>
    <div>
        <p>{{msg}}</p><hr/>
         <p>{{$store.state.count}}</p><hr/>
         <p>
             <button @click="$store.commit('add')">加</button>
             <button @click="$store.commit('reduce')">减</button>
         </p>

    </div>
</template>

<script>
import store from '../vuex/store';
export default {
    data(){
        return {
            msg:'hello vuex'
        }
    },
    store
}

</script>

同时修改路由，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的标签下添加：

<p>{{count}}</p>

目的是使：$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
    }
  }

 <p>{{count}}</p><hr/>

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

做法三：
在做法一的基础上：
引入：

import {mapState} from 'vuex';

将计算属性修改为：

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

或则修改为：

computed:mapState(['count'])

结果同上！！

对象展开运算符
待学习

传递参数

将store.js以下内容替换:

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

Count.vue也是；

<button @click="$store.commit('add',10)">加</button>

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

方法名简化

Count.vue内容添加：

import {mapState,mapMutations} from 'vuex';

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

 <button @click="add(10)">加</button>

效果一样！！

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修改内容为：
额外添加摁妞

<p>
       <button @click="addAction">加</button>
       <button @click="reduceAction">减</button>
</p>

 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是接收不到的！！
只能下面代码可以接收：

<p>{{$store.state.a.count}}</p><hr/>

如果还有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代码

<template>
    <div>
        <p>{{msg}}</p><hr/>
         <p>{{$store.state.a.count}}</p><hr/>
         <p>{{count}}</p><hr/>
         <p>
             <button @click="add(10)">加</button>
             <button @click="$store.commit('reduce')">减</button>
         </p><hr>
         <p>
             <button @click="addAction">加</button>
             <button @click="reduceAction">减</button>
         </p>

    </div>
</template>

<script>
import store from '../vuex/store';
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
export default {
    data(){
        return {
            msg:'hello vuex'
        }
    },
    store,
    // computed:mapState(['count']),
    // computed:{
    //     ...mapState(['count']),
    //     // ...mapGetters(['count'])
    //     },
    methods:{
        ...mapMutations(['add','reduce']),
        ...mapActions(['addAction','reduceAction'])
        },
    // methods:mapMutations(['add','reduce'])
    computed: {
        count () {
        return store.state.a.count
        }
    }
}

</script>