Vuex核心組件代碼筆記

Vuex

vuex之store

<script src="./static/vue.min.js"></script>
<script src="./static/vuex.js"></script>
<div id="app">
    <div>
      <h3>{{ name }}</h3>  <!-- name 只會去調取computed 裏的數據-->
    </div>
  </div>
  <script>
    Vue.use(Vuex);

    let store = new Vuex.Store({
      state: {
        name: 'wqp',
      },
    })
    new Vue({
      el: "#app",
      store: store,
      computed: {
        name: function () {
          console.log(this);
          return this.$store.state.name;   // 想獲取到vuex中的store數據，只能在這裏獲取
        } 
      }
    })
  </script>

vuex之getters

<div id="app">
    <div>
        <h1>{{ age }}</h1>   <!-- age 只會去調取computed 裏的數據-->
    </div>
</div>

<script>
    Vue.use(Vuex);

    let store = new Vuex.Store({
        state: {
            age: 10
        },
        getters: {
            getAge: function (state) {
                return state.age + 20    // 調取 state的值
            }
        }
    })

    new Vue({
        el: "#app",
        store: store,
        computed: {
            age: function() {
                console.log(this)
                return this.$store.getters.getAge;   // 調取 getters 裏定義的方法
            }
        }
    })
</script>

vuex之mutations

<div id="app">
    <div>
        <h3>{{ score }}</h3>
        <button @click="changeScore">修改成績</button>
    </div>
</div>

<script>
    Vue.use(Vuex);

    let store = new Vuex.Store({
        state: {
            score: 100
        },
        mutations: {
            changeScore: function (state, payload) {
                console.log('payload: ', payload)
                return state.score += payload    // 修改數據變量
            }
        }
    })

    new Vue({
        el: '#app',
        store: store,
        computed: {
            score: function() {
                return this.$store.state.score
            }
        },
        methods: {
            changeScore: function() {
                this.$store.commit("changeScore", 555)   // 觸發變更操作，會調取 mutations 裏定義的“changeScore” 方法
            }
        }
    })
</script>

vuex之actions

<div id="app">
    <div>
      <h3>{{ score }}</h3>
      <button @click="reduceScore">點擊減少成績</button>
    </div>
  </div>

  <script>
    Vue.use(Vuex);

    let store = new Vuex.Store({
      state: {
        score: 100
      },
      mutations: {
        reduceChangeScore: function(state, payload) {
          return state.score -= payload
        }
      },
      actions: {
        reduceActionsScore: function(content, payload) {
          console.log("content: ", content)
          content.commit("reduceChangeScore", payload)   // 實際上還是調取 mutations 裏的方法
        }
      }
    })

    new Vue({
      el: "#app",
      store: store,
      computed: {
        score: function () {
          return this.$store.state.score
        }
      },
      methods: {
        reduceScore: function () {
          this.$store.dispatch("reduceActionsScore", 10);  // 調取actins裏定義的方法
        }
      }
    })
  </script>