Nuxt項目整合vuex

Nuxt項目中使用vuex

vuex官網: https://vuex.vuejs.org/zh/

搭建Nuxt項目看這個博客: 帶你從不懂到搭建第一個Nuxt項目

• Nuxt.js 內置引用了 vuex 模塊，因此不須要額外安裝。
• Nuxt.js 會嘗試找到應用根目錄下的 store 目錄，若是該目錄存在，它將作如下的事情：
  • 引用 vuex 模塊
  • 將 vuex 模塊 加到 vendors 構建配置中去
  • 設置 Vue 根實例的 store 配置項
• Nuxt.js支持兩種store的使用方式
  • 普通方式: store/index.js, 返回一個vuex.sotre實例
  • 模塊方式: store目錄下的全部.js文件會被轉換成爲狀態樹指定命名的子模塊 （index 是根模塊）

1. 在store目錄下建立index.js文件

2. State: 在index.js中編寫state區域

vuex中的數據源，咱們須要保存的數據就保存在這裏，能夠在頁面經過  this.$store.state.變量名   來獲取咱們定義的數據；

/**漫路h */
export const state = () => ({
    count:1
})

2.1 直接使用state中的數據

2.1.1 代碼

隨便一個頁面,經過this.$store.state.變量名便可獲取到數據

2.1.2 效果

2.2 經過mapState獲取state中的數據

3. Getters

Getter至關於vue中的computed計算屬性，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算，這裏咱們能夠經過定義vuex的Getter來獲取，Getters 能夠用於監聽、state中的值的變化，返回計算後的結果

3.1 修改store/index.js

/*const getters = {     //getters至關因而state的計算屬性，若是你須要將變量的值進行計算，而後輸出，寫這裏
include: (state) => (val) => {
return state.count==1;
}

4. Mutations

數據咱們在頁面是獲取到了，可是若是咱們須要修改count值怎麼辦？若是須要修改store中的值惟一的方法就是提交mutation來修改

4.1 向store/index.js添加以下代碼

/**漫路h  */
export const mutations = {
    updateCount(state, value) {
      state.count = value
    }
}

4.2 Mutations使用

4.2.1 html代碼

4.2.2 js代碼

4.2.3 效果

5. Actions

//actions提交的是mutations，至關於就是改變變量的方法的重寫，可是，actions是能夠進行異步操做的

5.1 修改store/index.js

/*const actions = {
async updateCount({state, commit}, val) {
commit('updateCount', val);
}
};*/

使用其它模塊

文件中的代碼都是同樣的,只是使用的時候有一點不一樣, 看下面代碼演示就能夠了

1. 建立js文件

2. 修改js文件

/**漫路h */
export const state = () => ({
    username:"遊客"
})

export const mutations = {
    updateUsername(state, value) {
      state.username = value
    }
}

3. 建立user.vue

代碼

<template>
  <div>
    用戶: {{username}}
    <input v-if="username=='遊客'" type="button" value="登錄" @click="updateUsername('漫路')" />
    <input v-if="username!='遊客'" type="button" value="退出" @click="updateUsername('遊客')" />
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  computed: {
    username () {
      return this.$store.state.user.username
    }
  },
  methods: {
      /**漫路h */
    ...mapMutations({
      updateUsername: 'user/updateUsername'
    })
  },
}
</script>

<style>
</style>

訪問路徑: localhost:3000/user

4. 效果

4.1 點擊登陸

4.1.1 登陸成功

4.2 點擊退出

4.2.1 退出成功