nuxt中store

nuxt中store的介紹使用

 

 

1.store詳解：nuxt內置了vuex，如果我們創建了store目錄，nuxt會自動處理vuex，我們只需要在store目錄中創建要使用的js文件即可

// 我們可以創建很多的使用的js文件，官方建議有一個主入口js，剩下的是配合主入口文件完成響應的功能

// store/user.js
export const state = () => ({
    userInfo: []
})

export const mutations = {
    add (state, object) {
        state.userInfo.push(object)
    }
}

export const actions = {
    getData (store) {
        setTimeout(() => {
            store.commit('add')
        }, 3000)
    }
}


// store/storage.js
// 本地存儲一些基本數據
export const state = () => ({
    
})

export const mutations = {
   
}

export const actions = {
    
}



// 在頁面中使用

console.log(this.$store.state.user.userInfo)    // 注意user是js文件名字，調用方法或者初始化數據的時候，要加上路徑從哪個文件中使用

const userInfo = {
      name: '小美',
      age: '20',
      sex: '女',
      id: 5
}

// 意思使用的是userjs文件下的addff
 this.$store.commit('user/add', userInfo)

// 執行異步方法的調用
this.$store.dispatch('user/getData')