Vue-mock data in cli project

  1. Install http-server. Run with the project.
  2. The SRC path creates the mock folder to configure the DESIRED JSON data.
  3. The root path creates vue.config.js to set the proxy situation.
  4. In the mock. Start the HTTP server.
# yarn global add http-server
# touch vue.config.js
# mkdir src/mock
# touch src/mock/list.json
# cd mock
# http-server .

module.exports ={
    devServer:{
        proxy:{
            '/list':{
                target:'http://localhost:8081',
                pathRewrite:{
                   '/list': 'list.json'
                }
            }
        }
    }
}
Copy the code

Vue-router Configures and uses routes

  1. Install the vue – youter
  2. SRC Root path to create router.js
  3. To introduce the build, use the vueRouter
  4. The main js into the router

router.js


# yarn add vue-router
# touch src/router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import pageA from 'a.vue'
import pageB from 'b.vue'
Vue.user(VueRouter);
const routers=[{
    path:'/',
    component: pageA
},
{
    path:'/b',
    component: pageB
}]
let router=new VueRouter({routers})
export default router;

Copy the code

main.js

import Vue from 'vue'
import App from './App.vue'
import './directive/n'
import router from './router'
Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')
Copy the code

Configure and use vuEX

Since we often encounter inter-component communication in the daily development process, of course. In vue.js parent-child communication, usually the parent component passes the value through props, and the sub-component is triggered by the user-defined event ¥emit, etc., including parent-grandson communication uses provide/Inject. However, multi-service modules and data between different modules are not coherent, so it is convenient to split vuex into multiple modules for code maintenance. And it also makes the functional modules high cohesion and low coupling

  • Vuex base use case

  1. Install vuex.
  2. Create store.js in the SRC path
  3. Customize state data, add mutations operation function, write trigger actions function
  4. The main js introduced vuex
  5. The last name introduced must be Store
  6. MapActions page to bring in defined methods;

store.js

# yarn add vuex
# touch 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={
   increment: ({
        commit
    }) => {
        commit('increment')
    },
    decrement: ({
        commit
    }) => {
        commit('decrement')}}export default new Vuex.Store({
    state,
    mutations,
    actions
})
Copy the code

main.js

import Vue from 'vue'
import App from './App.vue'
import './directive/n'
import router from './router'
import store from './store/index'
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')
Copy the code

a.vue

<template>
  <div class="page">
    <div> vuex {{$store.state.count}}</div>
    <button @click="increment"</button> < button@click ="decrement"</button> </div> </template> <script> import {mapActions} from'vuex'
exportdefault { methods:{ ... mapActions(['increment'.'decrement'
    ])
  }
}
</script>

Copy the code

  • Vuex multi-service module status management

  1. First, create index.js and modules folders under store file, which can write components of each module needed by our business, such as (A.js, B.js).
  2. Customize state data, add mutations operation function, write trigger actions function, and export the content we defined. Remember to add namespaced:true;
  3. Import the (a,b)js file we created in index.js. Here we use Modules to export the component content we create
  4. Page references bring in mapActions. Import methods through methods.
  5. Actions are triggered by user actions
  6. Action triggers, mutations changes the data. Finally, state updates the changed data and vUE content updates;

# mkdir src/store 
# mkdir src/store/modules
# touch src/store/modules/a.js
# touch src/store/modules/b.js
# touch src/store/index.js
Copy the code

a.js

const state = {
    count: 1
}
const mutations = {
    add(state) {
        state.count++
    },
    reduce(state) {
        state.count--
    }
}
const actions = {
    add: ({
        commit
    }) => {
        commit('add')
    },
    reduce: ({
        commit
    }) => {
        commit('reduce')}}export default {
    namespaced: true,
    state,
    mutations,
    actions
}
Copy the code

b.js

]const state = {
    money: 1
}
const mutations = {
    add(state) {
        state.money++
    },
    reduce(state) {
        state.money--
    }
}
const actions = {
    add: ({
        commit
    }) => {
        commit('add')
    },
    reduce: ({
        commit
    }) => {
        commit('reduce')}}export default {
    namespaced: true,
    state,
    mutations,
    actions
}

Copy the code

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import money from './modules/b'
import count from './modules/a'
Vue.use(Vuex)
export default new Vuex.Store({
    modules: {
        money,
        count
    }
})
Copy the code

Used in vUE pages

<template>
  <div class="page">
    <div> vuex {{$store.state.count.count}}</div>
    <button @click="add"</button> < button@click ="reduce"</button> </div> </template> <script> import {mapActions} from'vuex'
exportdefault { methods: { ... mapActions('count'['add'.'reduce'
    ])
  }
}
</script>
Copy the code

  • Vuex in mutations transfer parameters

  1. Just pass the parameter in the event function
  2. Mutations will do the operationVue page
<template>
  <div class="page">
    <div> vuex {{$store.state.count.count}}</div>
    <button @click="add(3)"</button> < button@click ="reduce"</button> </div> </template> <script> import {mapActions} from'vuex'
exportdefault { methods: { ... mapActions('count'['add'.'reduce'
    ])
  }
}
</script>
Copy the code

a.js

const state = {
    count: 10
}
const mutations = {
    add(state, param) {
        state.count += param
    },
    reduce(state) {
        state.count--
    }
}
const actions = {
    add: ({
        commit
    }, param) => {
        commit('add', param)
    },
    reduce: ({
        commit
    }) => {
        commit('reduce')}}export default {
    namespaced: true,
    state,
    mutations,
    actions

}
Copy the code