Vuex核心组件代码笔记

Vuex

vuex之store

<script src="./static/vue.min.js"></script>
<script src="./static/vuex.js"></script>
<div id="app">
    <div>
      <h4>{{ name }}</h4>  <!-- 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>
        <h2>{{ age }}</h2>   <!-- 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>
        <h4>{{ score }}</h4>
        <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>
      <h4>{{ score }}</h4>
      <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>