nuxtjs中修改head及vuex的使用
阿新 • • 發佈:2018-11-15
1.在之前vue專案中,我們如果需要改變每個頁面的title,是需要在路由裡配置meta然後通過路由守衛將每個頁面的title替換掉,但是在nuxtjs中他提供了一個方法,直接在每個.vue的檔案中使用這個head方法即可修改每個頁面的title
head(){
return {
title:'form表單'
}
},
2.在nuxtjs中使用vuex,和在vue中使用它是一樣的,先 npm install vuex 然後再store下簡歷index.js
import Vuex from 'vuex' import mutations from './mutations' const createStore = () => { return new Vuex.Store({ state: { counter: 0 }, mutations }) } export default createStore
mutations.js如下:
const mutations = {
increment(state) {
state.counter++
}
}
export default mutations
然後在.vue頁面中直接獲取或者呼叫
computed: mapState([ 'counter' ]), methods:{ increment() { this.$store.commit('increment') } }
通過computed中使用mapState獲取state中的counter,然後和在vue中一樣通過this.$store來改變state中的值