技術標籤：vue

vuex的五大核心

1、state - 存放Vuex store例項的狀態物件，用於定義共享的資料。
2、Action -動作，向store發出呼叫通知，執行非同步操作
3、Mutations -修改器，它只用於修改state中定義的狀態變數。（同步）
4、getter -讀取器，外部程式通過它獲取變數的具體值，或者在取值前做一些計算（可以認為是store的計算屬性）
5、modules對state進行分類處理

vuex的輔助函式

home頁面

<template>
  <div class="home">
    <
 
p>{{ strr }}</p>
    <p>{{ numm }}</p>
    <p>{{ getNum }}</p>
    <p><button @click="addNum">++</button></p>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters, mapActions } from "vuex";
// import * as all from "vuex";
 

// console.log(all);
export default {
  data() {
    return {};
  },
  computed: {
    // 第一種方式
    // ...mapState(["num", "str"]),
    // 第二種方式
    ...mapState({ numm: "num", strr: "str" }),
    //mapGetters也有兩種方式
    //第一種方式
    ...mapGetters(["getNum"]),
    //第二種方式同上
 

  },
  mounted() {
    this.getList()
  },
  methods: {
  	//mapMutations 也有兩種方式
    // 第一種方式
    ...mapMutations({addNum:'addNum'}),
    //第二種方式
    // ...mapMutations(["addNum"]),
    //mapActions 也有兩種方式
    //第一種
    ...mapActions(["getList"]),
    //第二種同上
  },
};
</script>

vuex的程式碼

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

import vuexPersist from "vuex-persist";
export default new Vuex.Store({
  state: {
    num: 200,
    str: '我是一段文字',
    result: {}
  },
  mutations: {
    addNum(state) {
      state.num += 10
    },
    saveList(state, data) {
      state.result = data
    }
  },
  getters: {
    getNum(state) {
      return Math.pow(state.num, 2)
    }
  },
  actions: {
    async getList(context) {
      console.log(context);
      let res = await axios.get('map.json')
      context.commit('saveList', res)
    }
  },
  modules: {},
  plugins: [
    new vuexPersist({
      storage: window.localStorage,
    }).plugin,
  ],
});