Vue狀態管理vuex中state的用法

• store

  // store.js
      import Vue from "vue";
      import Vuex from "vuex";
  
      Vue.use(Vuex);
  
      export default new Vuex.Store({
          state: {
              token: "登陸憑證"
          },
          mutations: {},
          actions: {},
          modules: {}
      });
  

• 使用state，直接使用和通過計算屬性使用

  // App.vue
      <template>
          <div id="app">
              <p>{{ $store.state.token }}</p>
              <p>{{ token }}</p>
          </div>
      </template>
  
      <script>
      export default {
          computed: {
              token() {
                  return this.$store.state.token;
              }
          }
      };
      </script>
  

• 通過mapState輔助函數使用state數組的方式（一）

  // App.vue
      <template>
          <div id="app">
              <p>{{ $store.state.token }}</p>
              <p>{{ token }}</p>
          </div>
      </template>
  
      <script>
      import { mapState } from "vuex"; // 解構賦值引用輔助函數
      export default {
          computed: {
              ...mapState(["token"]) // 解構賦值使用輔助函數
          }
      };
      </script>
  

• 通過mapState輔助函數使用state數組的方式（二）

  // App.vue
      <template>
          <div id="app">
              <p>{{ $store.state.token }}</p>
              <p>{{ token }}</p>
          </div>
      </template>
  
      <script>
      import vuex from "vuex";
      let mapState = vuex.mapState;
  
      export default {
          computed: mapState(["token"]) //映射的計算屬性的名稱與 state 的子節點名稱相同時，才能使用數組的方式
      };
      </script>
  

• 通過mapState輔助函數使用state對象的方式(一)字符串

  \\ App.vue
      <template>
          <div id="app">
              <p>{{ $store.state.token }}</p>
              <p>{{ token }}</p>
          </div>
      </template>
  
      <script>
      import { mapState } from "vuex";
      export default {
          computed: {
              ...mapState({
                  token: "token"
              })
          }
      };
      </script>
  

• 通過mapState輔助函數使用state對象的方式(二)普通函數(如果要使用 this 獲取局部狀態，必須使用常規函數)

  \\ App.vue
      <template>
          <div id="app">
              <p>{{ $store.state.token }}</p>
              <p>{{ token }}</p>
          </div>
      </template>
  
      <script>
      import { mapState } from "vuex";
      export default {
          data(){
              return {
                  pwd:"密碼"
              }
          },
          computed: {
              ...mapState({
                  token(state) {
                      return this.pwd + state.token;
                  }
              })
          }
      };
      </script>
  

• 通過mapState輔助函數使用state對象的方式(二)箭頭函數

  \\ App.vue
      <template>
          <div id="app">
              <p>{{ $store.state.token }}</p>
              <p>{{ token }}</p>
          </div>
      </template>
  
      <script>
      import { mapState } from "vuex";
      export default {
          computed: {
              ...mapState({
                  token: state => state.token
              })
          }
      };
      </script>
  

展開操作符 參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

剩余參數 參考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Rest_parameters

vuex state 參考：https://vuex.vuejs.org/zh/guide/state.html