nuxtjs中修改head及vuex的使用

Posted 2021-01-20 JaydenLD@Clara

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