mock data in vue-cli project

1. Install http-server. Run with the project.
2. The src path creates a mock folder that configures the required json data.
3. Root path creates vue.config.js setting proxy condition.
4. Enter mock.Start 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'
                }
            }
        }
    }
}

vue-router routing configuration and use

1. Install vue-youter
2. src root path to create router.js
3. Introduce build, use vueRouter
4. main.js introduces 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;

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')

vuex-related configuration and use

• vuex base use case

1. Install vuex.
2. Create store.js in src path
3. Customize state data, add mutations operation functions, write trigger actions functions
4. main.js introduces vuex
5. The last name introduced must be store
6. Introduce mapActions into the page, and 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
})

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')

a.vue

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

• vuex multi-business module state management

1. First create the index.js and modules folders under the store file, where you can write the components of each module that our business needs, such as (a.js,b.js)
2. Customize the state data, add mutations operation functions, write trigger actions functions, and export what we define.Remember to add namespaced:true to the export at this time;
3. Import the (a,b)js file we created in index.js.Here we use modules to export the component content we created
4. Introducing mapActions is referenced on the page.Import methods through methods.
5. Triggering action through user action behavior
6. After the action triggers, mutations operate to change the variable data.Finally, the state updates the changed data and the content of the vue group 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

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
}

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
}

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
    }
})

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

• mutations transfer parameter in vuex

1. Simply pass in event functions
2. mutations do it

<template>
  <div class="page">
    <div> vuex {{$store.state.count.count}}</div>
    <button @click="add(3)">increase</button>
    <button @click="reduce">reduce</button>
  </div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions('count', [
      'add',
      'reduce'
    ])
  }
}
</script>

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

}