Vue笔记-vueRouter路由与Vuex

目录

Vue-router路由基础

简单路由实例

Vuex基础

基础数据流实例

多模块数据流实例

---

Vue-router路由基础

简单路由实例

1. 安装：根文件夹下终端输入： npm i vue-router
2. 在src下创建一个文件夹pages,其中创建两个vue文件a、b;
3. 在src下创建router.js,

import Vue from 'vue';

import VueRouter from 'vue-router'

import pageA from './pages/a.vue'

import pageB from './pages/b.vue'

 

Vue.use(VueRouter)

//界面路由关系

const routes = [

{

path:'/pageA',//路由路径

component:pageA

},

{

path:'/pageB',

component:pageB

}

]

const router = new VueRouter(

{routes}//实例化

)

export default router//输出

4.在main.js 中引入

import Vue from 'vue'

//import App from './App.vue'

import router from './router'

 

Vue.config.productionTip = false

 

new Vue({

//render: h => h(App),

router//引入路由

}).$mount('#app')

5.在public中的index中加入路由视图

<div id="app">

<!-- 路由渲染位置 -->

<router-view></router-view>

<router-link to='/'>toFirst</router-link>

<router-link to='/pageA'>toA</router-link>

<router-link to='/pageB'>toB</router-link>

</div>

<!-- built files will be auto injected -->

6.如果采用脚手架cli,要在根目录下创建文件vue.config.js

module.exports ={

runtimeCompiler: true//默认为关闭

}

Vuex基础

基础数据流实例

 

1. 安装：根文件夹下终端输入： npm i vuex
2. 在src目录下创建store.js

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex)

const state ={

count:1

}

const mutations = {

increment(state){

state.count++

},

decrement(state){

state.count--

}

}

const actions ={

incremen: ({commit})=>{

commit('increment')//'increment'与mutations中对应,此处做提交操作

},

decremen:({commit})=>{

commit('decrement')

}

}

export default new Vuex.Store({state,mutations,actions})

3.在main.js 引入store.js，使其实例化，可获取state等

import store from './store.js'

new Vue({

render: h => h(App),

// router//引入路由

store//引入store实例Vuex，使得组件中可获取state中的数据

}).$mount('#app')

4.在components下创建vuex.vue组件，并搭载到App.vue中

Vuex.vue:

<template>

<div class="vuex">

vuex{{ $store.state.count}}

<!-- $store使用前提是在main中已经引入实例store -->

<button type="button" name="button" @click="incremen">增加</button>

<button type="button" name="button" @click="decremen">减少</button>

</div>

</template>

<script>

import {mapActions} from 'vuex'//用vuex做store与component关联,且获取到actions

export default {

methods: mapActions([

'incremen',//与action对应

'decremen'

])

}

</script>

<style>

</style>

多模块数据流实例

1. 安装：根文件夹下终端输入： npm i vuex
2. 创建a.js模块二,b.js,(模块一)index.js（整合）

a.js 

const state ={//数据

money:1

}

 

const mutations = {//方法

add(state,param){

state.money+=param

},

reduce(state){

state.money--

}

}

const actions = {//提交到mutations

add: ({commit},param)=>{//可传参，前提是在事件中有参数

commit('add',param)

},

reduce:({commit})=>{

commit('reduce')

}

}

//导出

export default{

namespaced:true,//解决不同模块命名冲突的问题

state,

mutations,

actions

}

Index.js

import Vue from 'vue';

import Vuex from 'vuex'

import money from './modules/a.js'

import count from './modules/b.js'

 

Vue.use(Vuex)

export default new Vuex.Store({

modules:{

money,

count

}

})

4.创建组件vuea,vueb

Vuea.vue

<template>

<!-- 第一个money是模块名第二个是数据 -->

<div class="pagea">pagea{{$store.state.money.money}}

<button type="button" name="button" @click="add(2)">增加</button>

<button type="button" name="button" @click="reduce">减少</button>

</div>

</template>

<script>

import {mapActions} from 'vuex'

export default {

methods:mapActions('money',['add','reduce'])

}

</script>

<style>

</style>

5.在App.vue中引用vuea,vueb组件，在main.js中搭载index.js,并实例化store