關於vueX的應用

<!-- 接一篇文章 vue開發看這篇文章就夠了 https://segmentfault.com/a/1190000012692321 -->
<!-- 
    vuex 咱們把它叫作狀態管理 ‘狀態’一詞來源與react 在react中數據在state中 實際上也就是"數據管理"
    vuex解決了大型項目的組件間的通訊問題 實際上也就是數據中介 全部的數據增刪改查所有經過vuex來實現 
  -->
  <div id="app">
    <!--頁面總調用state中的數據-->
    store 中的數據：{{ $store.state.count }}

    <button @click="fn">修改store中的數據</button>
    <!-- 頁面中條用getters中的數據 -->
    <p>getters的使用：{{ $store.getters.doneTodosCount }}</p>
  </div>

    <!--引入包-->
  <script src="./vue.js"></script>
  <script src="./vuex.js"></script>


  <script>
    // 建立store，用來存儲項目中使用的數據(理解爲數據倉庫 倉庫中有管理數據的方法)。
    // 也就是說 整個應用中的數據，都應該交給 store 來管理
    // 開發環境下 引入vuex那須要use一下 Vue.use( vuex)
    
    const store = new Vuex.Store({
      // state即狀態，也就是組件中的data（數據）
      state: {
        count: 0,

        todos: [
          { id: 1, text: '...完成', done: true },
          { id: 2, text: '...完成', done: true },
          { id: 3, text: '...完成', done: true },
          { id: 4, text: '...完成', done: true },
          { id: 5, text: '...未完成', done: false }
        ]
      },

      // getters 就是 store 的計算屬性，用法與計算屬性相同！！！
      getters: {
        doneTodosCount(state) {
          return state.todos.filter(todo => todo.done).length
        }
      },

      // 注意：state中的數據只能經過 mutations 來修改！！！
      // 也就是：數據由 store 提供，一樣的修改數據方法也是由 store 來提供的，這就是：mutations
      mutations: {
        increment(state) {
          // 參數 state即：上面的state，也就是數據
          state.count++
        },

        // payload 表示提交這個方法的時候，傳遞的數據，最好是一個對象
        increment2(state, payload) {
          state.count += payload.num
        }
      }
    })

    /* 
    使用 store 中的數據：
    
    修改數據：store.commit('increment')
    讀取數據：store.state.count
    */

    var vm = new Vue({
      el: '#app',
      data: {
        
      },

      methods: {
        fn() {
          // this.$store.commit('increment')
          //經過commit觸發mutations中的方法  參數一：方法名 參數二：傳遞數據
          this.$store.commit('increment2', {num: 3})
        }
      },
      // 將 store 與Vue實例關聯到一塊兒
      store: store
    })
  </script>