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