1. 程式人生 > >nuxtjs中修改head及vuex的使用

nuxtjs中修改head及vuex的使用

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中的值