技術標籤：javascriptvue.js

Vuex 的基本使用

當我們建立專案時配置腳手架可以直接選擇vuex，這樣後期不用我們自己配置vuex，如果沒有選擇，但是我們又要用到vuex怎麼辦呢？

1.安裝vuex依賴包

npm install vuex --save

2.匯入vuex包

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

3.建立store物件

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);

export default
 
 new Vuex.Store({
  // 倉庫資料本身
  state: { count: 0 },
  // 修改倉庫資料的唯一方式 改變狀態
  mutations: {},
  // 倉庫中的計算屬性
  getters: {},
  // 非同步修改倉庫資料 最終只能還是mutations修改倉庫資料
  actions: {},
  // 模組化
  modules: {},
});

4.將Store物件掛載到vue例項中

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

vuex五大核心

1、什麼是vuex？

vuex是一個專門為 Vue.js 應用設計的狀態管理架構，是vue的狀態管理工具，統一管理和維護各個vue元件的可變化狀態，也就是說vuex就是一個存放公共資料的倉庫

2、vuex有五個核心概念
state：vuex的基本資料，用來儲存需要變更的變數。
geeter：可以理解為store的計算屬性。
mutations：用來修改提交store中的資料，每個mutation鬥魚一個字串的時間型別（type）和一個回撥函式（handler），這個回撥函式就是需要實際進行狀態修改的地方，但是前提是不許要是同步（如需非同步操作可用到actions）
action：action提交的是mutation，不能直接變更狀態，action可以包含任意非同步操作

modules：將vueX中的store進行模組化，使每個模組都擁有自己的的state、mutation、action、getter。

vuex中的輔助函式

vuex官方給我們提供了一系列輔助函式來簡化我們的程式碼，也就是 {mapState, mapMutations, mapActions, mapGetters},使用這些函式會讓我們的程式碼更簡潔

注：

• mapState，mapGetters返回的是屬性，所以混入到 computed 中
• mapMutations，mapActions返回的是方法，只能混入到methods中

<template>
  <div>
    <div>
      <h3>{{ log }}</h3>
    </div>
    數量<span>{{ number }}</span> <br />
    <el-button type="success" @click="add">+</el-button>
    <el-button type="info" @click="jianj">-</el-button>
  </div>
</template>

<script>
import { mapState, mapMutations} from "vuex";

export default {
  name: "",
  props: [],
  components: {},
  data() {
    return {
      // num:999,
    };
  },
  methods: {
    //陣列
    // ...mapMutations(["addNum","jian"]),
    //物件
    ...mapMutations({ add: "addNum", jianj: "jian" }),
    
    //老套方法
    // addfn(){
    //   this.$store.commit("addNum")
    // },

    // addjian(){
    //   this.$store.commit("jian")
    // }
  },
  mounted() {},
  watch: {},
  computed: {
    //物件
    ...mapState({ number: "num", log: "log" }),
    //字串
    // ...mapState(["log","num"]),

    // log() {
    //   return this.$store.state.log;
    // },
  },
};
</script>

<style scoped>
div {
  text-align: center;
}
</style>

vuex中使用

import Vue from 'vue'
import Vuex from 'vuex'
import VuexPersistence from 'vuex-persist'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    list:[],
    login:{},
    log:'我是一句話',
    num:100,
  },
  mutations: {
    //點選加加
    addNum(state){
      state.num ++
    },
    //減減
    jian(state){
      state.num --
    },
  },
  actions: {

  },
  plugins: [
    new persist({
        storage: window.localStorage,
    }).plugin,
]
})

本地儲存持久化外掛(vuex-persistedstate)解決重新整理資料消失的問題

頁面重新整理後，想儲存頁面未儲存的資料。我們總是習慣於放在瀏覽器的sessionStorage和localStorage中。但是用了vue後，vuex就可以被應用了。

vuex優勢：相比sessionStorage，儲存資料更安全，sessionStorage可以在控制檯被看到。

vuex劣勢：在F5重新整理頁面後，vuex會重新更新state，所以，儲存的資料會丟失。

vuex可以進行全域性的狀態管理，但重新整理後重新整理後資料會消失，
這時候我們可以使用外掛-vuex-persistedstate做到資料持久化，這個外掛會幫助我們把state裡的資料存進本地儲存中

使用方法如下所示

1、安裝本地儲存（持久化外掛）

npm i vuex-persist --save

2、在store下的index.js中引入

import persist from "vuex-persist";

3、設定外掛配置 跟state同一級的地方設定如下程式碼

plugins: [
    new persist({
        storage: window.localStorage,
    }).plugin,
],