【万字长文】 Vue全家桶从入门到实战(1)

2、打开Terminal终端，输入vue init webpack vue_day5 ，进行vue-day5项目的创建。

3、接下来的步骤和使用Vue Cli脚手架开发一样。

4、显示如下页面，项目初始化成功。

可以看下目录结构，和使用Vue CLI脚手架开发目录结构一致。

5、在Terminal终端输入cd vue_day5，进入当前项目根目录，项目目录中包含package.json才是根目录，可以输入dir查看当前目录结构。

6、最后我们输入npm run dev启动项目，出现如下界面：

说明项目成功运行！！！输入http://localhost:8080 ，打开浏览器查看一下，出现默认界面。

main.js 项目中主入口

//引入vue.js

import Vue from ‘vue’

//引入app.vue 组件

import App from ‘./App’

//引入router目录中 /index.js

import router from ‘./router’

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: ‘#app’, //指定vue实例作用范围

router,

components: { App },

template: ‘’

})

19.4、开发vue cli项目(一)

1、Student组件

template>

{{ msg }}

4、index.js

import Vue from ‘vue’

import Router from ‘vue-router’

//@ 代表src目录

import HelloWorld from ‘@/components/HelloWorld’

import User from ‘@/components/User’

import Student from “…/components/Student”;

Vue.use(Router)

export default new Router({

routes: [

{

path: ‘/’,

name: ‘HelloWorld’,

component: HelloWorld

},

{

path: ‘/user’,

name: ‘user’,

component: User

},{

path: ‘/student’,

name: ‘student’,

component: Student

}

]

})

启动项目测试一下：

成功查询到数据！！！

19.5、开发vue cli项目(二)

20、VueX 状态管理

---

20.1、简介&安装

1.简介

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

2.安装vuex

• npm install vuex --save

3.创建vue cli中创建store文件夹

4.在stroe中创建index.js文件

import Vue from ‘vue’

import Vuex from ‘vuex’

//1.安装vuex

Vue.use(Vuex);

//2.创建store对象

const store = new Vuex.Store({

});

//3.暴露store对象

export default store;

5.在main.js中引入stroe并注册到vue实例

import Vue from ‘vue’

import App from ‘./App’

import router from ‘./router’

import store from “./stroe”;//引入store

Vue.config.productionTip = false

/* eslint-disable no-new */

new Vue({

el: ‘#app’,

router,

components: { App },

template: ‘’,

store,//注册状态

})

20.2、state属性

1.state属性

• 作用: 用来全局定义一些共享的数据状态

2.语法

const store = new Vuex.Store({

state:{

counter:0,//定义共享状态

},

}

3.使用

{{KaTeX parse error: Expected 'EOF', got '}' at position 20: …e.state.counter}̲} ===> {{this.store.state.counter}}

20.3、mutations 属性

1.mutations 属性

• 作用: 用来定义对共享的数据修改的一系列函数

2.语法

const store = new Vuex.Store({

state:{

counter:0,//定义共享状态

},

mutations:{

//增加

increment(state){

state.counter++

},

//减小

decrement(state){

state.counter–

}

}

});

3.使用

this.$store.commit(‘decrement’);

this.$store.commit(‘increment’);

4.mutations传递参数

• a.定义带有参数的函数

mutations:{

//addCount 参数1:state 对象 参数2:自定义参数

addCount(state,counter){

console.log(counter);

return state.counter += counter ;

}

}

• b.调用时传递参数

this.$store.commit(‘addCount’,11);

20.4、getters 属性

1.getters 属性

• 官方: 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据

它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

• 作用: 用来定义对共享的数据的计算相关的一系列函数 相当于 computed 属性 会对结果进行缓存

2.语法

getters:{

//平方

mathSqrts(state){

console.log(“--------”);

return state.counter*state.counter;

},

//乘以一个数字

mathSqrtsNumber(state,getters){

return getters.mathSqrts*3;

},

//传递参数

mathSqrtsNumbers(state,getters){

return function (number){

return number;

}

}

}

3.使用

•   1.{{$store.getters.mathSqrts}}
  

• 2.{{$store.getters.mathSqrtsNumber}}

• 3.{{$store.getters.mathSqrtsNumbers(3)}}

---

20.5、练习

index.js

import Vue from ‘vue’ //vue.js

import Vuex from ‘vuex’ //vuex.js

//1. vue中使用vuex

Vue.use(Vuex);

//2. 创建store对象

export default new Vuex.Store({

//state: 用来定义所有组件共享的数据

state:{

counter:0,

},

//mutations: 用来定义对共享数据的修改方法

mutations:{

incrCounter(state){

state.counter++;

},

decrCounter(state){

state.counter–;

},

incrCounterCount(state,count){

state.counter += count;

},

},

//getters: 相当于store共享数据计算属性，该计算属性中方法只会执行一次，只有计算属性值发生变化才会重新计算，相当于之前的computed属性

getters:{

incrCount(state){ //二次渲染计算

return state.counter + 10;

},

match(state,getters){

return getters.incrCount * 2;

}

}

});

User.vue

用户管理--{{this.$store.state.counter}}--{{this.$store.getters.incrCount}}--{{this.$store.getters.match}}

<input type=“button” value=“点我修改共享数据counter++” @click=“changeStoreCounter”>

<input type=“button” value=“点我修改共享数据counter–” @click=“decrStoreCounter”>

<input type=“button” value=“点我修改共享数据counter+5” @click=“changeStoreCounterFive”>

添加用户信息

编号 姓名 年龄 工资 操作 {{user.id}} {{user.name}} {{user.age }} {{user.des}}

---