配置 vuex 和 vuex 本地持久化

vuex是什么
vuex 的五個核心概念
- State 定義狀態(變量)
- Getter 獲取狀態(變量的值)
- Mutation 修改狀態(修改變量的值)
- Action 觸發 mutation 函數,從而修改狀態
- Module 當狀態很多時,把狀態分開來管理
通過vuex進行跨組件通信
vuex 本地持久化

(一) vuex是什么

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

狀態: 本質上就是一個變量,賦予不同的值就是不同的狀態,管理狀態實際上就是管理一堆變量
響應式,vuex跟全局變量不同,修改了vuex的某個狀態,依賴這個狀態的視圖都會發生改變

(二) vuex的5個核心概念

1. State 定義狀態(變量), 輔助函數mapState
2. Getter 獲取狀態(變量的值),同時可以對狀態進行處理, 輔助函數mapGetters
3. Mutation 修改狀態(修改變量的值)
4. Action 觸發 mutation 函數,從而修改狀態,支持異步
5. Module 當狀態很多時,把狀態分開來管理

(三) 配置vuex

安裝vuex
```
npm i vuex
```

vuex配置

在根目錄新建/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const config = {
    // 定義狀態
    state: {
        isLogin: false
    },

    // getters
    getters: {
        // isLogin:(state) =>{
        //     return state.isLogin;
        // },
        // 等同上面的寫法
        isLogin: state => state.isLogin
    },

    // 修改state里面的變量
    mutations: {
        // state指向上面的state,payload是調用muation時傳過來的參數
        updateLogin(state, payload) {
            state.isLogin = payload;
        }
    },

    // action行為
    actions: {

    },

    // module
    modules: {

    }
}
export default new Vuex.Store(config);

在main.js導入并掛載到vue的實例上

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

(四) 獲取在vuex定義的狀態

通過this.$store.state.xxx 來取,具體使用

created() {
    console.log(this.$store.state.isLogin);
    console.log(this.$store.state.firstName);
}

// 通常我們會定義計算屬性來取值,比如
computed: {
    // 自定義計算屬性
    isLogin() {
      // 獲取vuex的isLogin的值
      return this.$store.state.isLogin
    }
}

通過輔助函數mapState來獲取

  import {mapState} from 'vuex'
  
  data() {
    return {
      addr: '廣西'
    };
  },
 
 computed: mapState({
    // 取state里count的值
    count: 'count',
 // 取state里count的值,用countAlias變量接收
    countAlias: 'count',
    // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
    fullName(state) {
      return this.addr + state.firstName + state.lastName;
    }
  })
  
 // 如果需要定義其它的計算屬性,就按照下面的寫法
 computed: {
     // 其他的計算屬性
     total() {
         return 500
     },
     ...mapState({
           // 取state里count的值
            count: 'count',
            // 取state里count的值,用countAlias變量接收
            countAlias: 'count',
            // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
            fullName(state) {
              return this.addr + state.firstName + state.lastName;
            }
      })
 }

通過getters和mapGetters來取

// 定義一個用來獲取fullName的getter
  getters: {
        fullName(state) {
            return state.firstName + state.lastName;
        }
    },

// 通過mapGetters
import {mapGetters} from 'vuex';

computed: {
     fullName() {
         return this.$store.getters.fullName;
     }
}

使用getters的好處是，當我們在vuex中的index.js的文件中定義好了getters的方法，我們可以在任意的組件中使用getters的方法，非常的方便。例如我們有一個組件a.vue，需要使用到getters的方法，我們直接在該組件的計算屬性computed中使用即可：

computed: {
     fullName() {
         return this.$store.getters.fullName;
     }
}

(五) 修改state中的狀態

定義state和mutation

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        name: "沒名字",
        count: 1
    },
    getters: {

    },
    // 修改state里的值必須通過mutation來修改
    mutations: {
        /**
         * 定義一個修改name的mutation
         * state是上面的定義的state
         * payload是新的數據
         */
        updateName(state, payload) {
            state.name = payload;
        }
    }
})

在需要的時候調用mutation進行修改state里的name狀態

```
// 第一個參數是mutation的名字,第二參數是要修改成的數據
this.$store.commit('updateName','老胡');
```

(六) 綜合例子: 通過vuex實現加減

在vuex里配置state和mutation

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0
    },

    mutations: {
        addOne(state, payload) {
            state.count = state.count + 1;
        },
        minusOne(state, payload) {
            if (state.count > 0) {
                state.count = state.count - 1;
            }
        }
    }
})

index.vue的配置

<template>
  <div>
    <button @click="minus">-</button>
    <span>{{count}}</span>
    <button @click="add">+</button>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState({
    count: "count"
  }),

  methods: {
    add() {
      this.$store.commit("addOne");
    },
    minus() {
      this.$store.commit("minusOne");
    }
  }
};
</script>

(六) vuex 本地持久化

當刷新頁面,項目重新加載,vuex 會重置,所有狀態回到初始狀態,使用 vuex-persistedstate 可以避免這種情況

安裝 vuex-persistedstate
```
npm i vuex-persistedstate
```

在vuex中,添加plugins

 import createPersistedState from 'vuex-persistedstate'
 
 plugins: [createPersistedState()],

// 具體例子如下

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from 'vuex-persistedstate'
// 導入模塊
import login from './module/login'
import my from './module/my'
Vue.use(Vuex);
export default new Vuex({
    plugins: [createPersistedState()],
    // 模塊
    modules: {
      login,
      my
    },
    state: {
        isLogin: false,
        username: '',
        token: ''
    },
    getters: {
        isLogin: state => state.isLogin,
        token: state => state.token,
        username: state => state.username
    },
    mutations: {
        updateLogin(state, payload) {
            state.isLogin = payload;
        },
        updateToken(state, payload) {
            state.token = payload;
        },
        updateUsername(state, payload) {
            state.username = payload;
        }
    },
    actions: {
      LoginAction({commit}, payload) {
        commit('updateLogin',payload)
      },
      TokenAction({commit}, payload) {
        commit('updateToken',payload)
      },
      UsernameAction({commit}, payload) {
        commit('updateUsername',payload)
      },
    }
})

(七) modules的使用

就是為了分塊管理，當我們的狀態太多的時候，全寫在vuex中不易于管理，我們需要在外面的文件寫好后，然后再倒進來，就像我們的后端接口model一樣，都是為了方便管理

配置模塊的vuex

export default {
    state: {
        cartNum: 10
    },

    getters: {

    },

    mutations: {
        updateCartNum(state, payload) {
            state.cartNum = payload;
        }
    },

    actions: {

    }
}

獲取狀態

<template>
  <div>{{cartNum}}</div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: mapState({
    cartNum(state) {
      return state.cart.cartNum;
    }
  })
};
</script>

在vuex的index.js中導入模塊

image.png

修改狀態

 this.$store.commit("updateCartNum", 200);

(八) action

Action 類似于 mutation，都是用來修改vuex的狀態, 不同在于：

Action 提交的是 mutation，而不是直接變更狀態。
Action 可以包含任意異步操作。

配置action

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        num: 10
    },

    mutations: {
        updateNum(state, payload) {
            state.num = payload;
        }
    },

    actions: {
        /**
         * 修改num的action
         * @param {*} ctx 可以拿到一個類似store的實例
         * @param {*} payload 修改的數據
         */
        updateNum(ctx, payload) {
            setTimeout(() => {
                ctx.commit('updateNum', payload);
            }, 3000)
        }
    }
})

派發action,在需要的地方,調用以下方法
```
 this.$store.dispatch("updateNum", 500);
```

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

vuex的使用

vuex的使用

配置 vuex 和 vuex 本地持久化

目錄

(一) vuex是什么

(二) vuex的5個核心概念

(三) 配置vuex

安裝vuex

vuex配置

在main.js導入并掛載到vue的實例上

(四) 獲取在vuex定義的狀態

通過this.$store.state.xxx 來取,具體使用

通過輔助函數mapState來獲取

通過getters和mapGetters來取

(五) 修改state中的狀態

(六) 綜合例子: 通過vuex實現加減

(六) vuex 本地持久化

(七) modules的使用

(八) action

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

vuex的使用

配置 vuex 和 vuex 本地持久化

目錄

(一) vuex是什么

(二) vuex的5個核心概念

(三) 配置vuex

安裝vuex

vuex配置

在main.js導入并掛載到vue的實例上

(四) 獲取在vuex定義的狀態

通過this.$store.state.xxx 來取,具體使用

通過輔助函數mapState來獲取

通過getters和mapGetters來取

(五) 修改state中的狀態

(六) 綜合例子: 通過vuex實現加減

(六) vuex 本地持久化

(七) modules的使用

(八) action

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频