菜鳥看前端（vuex）

vuex

概念：Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式

五大核心

1. state： 存盤資料的地方

2. actions： 異步操作

3. mutations: 同步操作，只有mutations可以修改state中的資料

4. getters： 相當于 state的計算屬性，

5. moduleas模塊化 modeA, modeB，modeC

6. plugins 插件

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

mutations

用來修改同步state中的資料，在mutations中自定義一個函式，接受兩個引數第一個引數是state，第二個引數是要修改的資料
在組件中通過this.$store.commit(‘mutations中自定義的方法’，‘要傳輸的資料’)

vuex中

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

export default new Vuex.Store({
  state: {
    aaa:"1234"
  },
  mutations: {
    setData(state,data){
      state.aaa = data
    }
  },
  actions: {
  },
  modules: {
  },

})

vue組件中

<template>
    <div>
      <h3>{{this.$store.state.aaa}}</h3>
      <button @click="change">點擊</button>
    </div>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
      change(){
        // console.log(123456)
        this.$store.commit("setData",'我同步改變啦')
      },
    },
    computed:{
    }
};
</script>

<style scoped>

</style>

action

用來異步修改mutations,通過mutations來修改state中的資料，先通過commit來呼叫mutations中的方法
在vue組件中用dispatch來呼叫action中的方法
vuex中

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

export default new Vuex.Store({
  state: {
    aaa:"1234"
  },
  mutations: {
    setData(state,data){
      state.aaa = data
    }
  },
  actions: {
    set({commit},val){
      setTimeout(()=>{
        commit('setData',val)
      },1000)
    }
  },
  modules: {
  },
})

在組件中

<template>
    <div>
      <h3>{{this.$store.state.aaa}}</h3>
      <button @click="change1">點擊</button>
    </div>
</template>

<script>
export default {
    data() {
        return {

        };
    },
    created() {

    },
    mounted() {

    },
    methods: {

      change1(){
        this.$store.dispatch("set","我異步改變啦")
      }
    },
    computed:{
    }
};
</script>

<style scoped>

</style>

getters

getters 是store的計算屬性，類似于computed,對state里的資料進行一些過濾，改造等等

const store = new Vuex.Store({
   //state存盤應用層的狀態
   state:{
      count:5  //總數：5
   },
   getters:{
      newCount:state => state.count * 3
   }
 });

語法糖

當一個組件需要多個狀態是，這些狀態都宣告成計算屬性過于冗長，于是有了輔助函式，

組件中

<template>
    <div>
      <h3>語法糖-----{{val}}</h3>
      <button @click="change">點擊</button>
      <button @click="change1">點擊</button>
    </div>
</template>

<script>
import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'

export default {
    data() {
        return {

        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
      change(){
        // console.log(123456)
        this.$store.commit("setData",'我同步改變啦')
      },
      change1(){
        this.$store.dispatch("set","我異步改變啦")
      }
    },
    computed:{
      ...mapState({
        // aaa:'aaa',
        val:"aaa"
      })
    }
};
</script>

<style scoped>

</style>

vuex中

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

export default new Vuex.Store({
  state: {
    aaa:"1234"
  },
  mutations: {
    setData(state,data){
      state.aaa = data
    }
  },
  actions: {
    set({commit},val){
      setTimeout(()=>{
        commit('setData',val)
      },1000)
    }
  },
  modules: {
  },

})

vue持久化

先安裝插件
npm install vuex-persistedstate --save

引入到vuex中

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()],
});

可以自定義存盤方式，存盤名字

import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
  		storage:sessionStorage
  		key:"vuexxx"
  })],
});

模塊化

在Vue中State使用是單一狀態樹結構，應該的所有的狀態都放在state里面，如果專案比較復雜，那state是一個很大的物件，store物件也將對變得非常大，難于管理，
module：可以讓每一個模塊擁有自己的state、mutation、action、getters,使得結構非常清晰，方便管理，

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)

// user模塊
let user = {
  namespaced:true, // 開啟命名空間
  state:{
    bread:"啦啦啦"
  },
  mutations:{
    setBread(state,data){
      state.bread = data
    }
  },
  actions:{},
  getters:{}
}
export default new Vuex.Store({
  state: {
    aaa:"1234"
  },
  mutations: {
    // 同步修改state中的資料
    setData(state,data){
      state.aaa = data
    }
  },
  actions: {
    // 異步修改state中的資料
    // 1. 通過commit 呼叫mutations中的方法，通過
    // mutations來修改state中的方法
    set({commit},val){
      setTimeout(()=>{
        commit('setData',val)
      },1000)
    }
  },
  modules: {
    user
  },
  plugins: [createPersistedState({
    storage:sessionStorage,
    key:"vuexxx"
})],
})

在頁面中使用,沒有使用語法糖的情況下

<template>
	<div>
	<p>{{this.$store.state.user.bread}}</p>
	</div>
</template>

使用語法糖

<template>
  <div>
  
    <h3>語法糖-----{{val}}</h3>

    <h3>使用模塊化中的資料 -------{{ this.$store.state.user.bread }}</h3>
    <h3>語法糖使用模塊化中的資料-------{{ bread }}</h3>
  
    <button @click="change2">點擊修改模塊化的資料</button>
  </div>
</template>

<script>
// 匯入命名空間
import { mapState, mapGetters, mapActions, mapMutations, createNamespacedHelpers } from "vuex";
const { mapState: mapStateuser, mapMutations: mapMutationsuser } = createNamespacedHelpers('user')
export default {
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {
    // 模塊中的mutations方法
    ...mapMutationsuser({
      setBread:"setBread"
    }),
    // 修改user模塊中資料
    // ****************************************************
    change2() {
      this.setBread("我修改的是模塊化中的資料")
    },
    //*****************************************************
  },
  computed: {
    ...mapState({
      val:"aaa"
    }),
    ...mapStateuser({
      bread:"bread"
    })
  },
};
</script>

<style scoped>
</style>