vue的數據管理(vuex)

1、vuex數據傳遞的流程
當組價需要修改state中的數據的時候必須通過dispatch來觸發actions里面的方法，actions的每一個方法里面都會有一個
commit方法，用來觸發mutations里面的方法, mutations用來修改state中的數據。當mutations里面的方法觸發的時候數據
就會發生改變，因為數據是響應式因此組件中的數據也會發生改變

2、vuex中5個屬性主要的作用

3、如何在多人協作中實現數據的模塊化

4、當刷新頁面的時候vuex中的數據丟失如何解決

在vuex中必須遵循單項數據流


vuex中的輔助函數 actions 與 mutations 的輔助函數必須在組件的methods里面進行使用,
state的輔助函數必須要在computed中使用



state
  用來存儲各個組件中公有的狀態

  如何訪問到vuex  state中的數據
  this.$store.state.屬性


  mapState輔助函數

    用法一、
      computed:Vuex.mapState(["state中的屬性"])


    用法二:
      computed:Vuex.mapState({
        num:"n",
        todoVal:"inputVal"
      }),

    用法三：

      computed:Vuex.mapState({
        num:state=>state.n,
        todoVal:state=>state.inputVal
      }),
    

    最終寫法:
       computed:{
          ...Vuex.mapState({
            num:state=>state.n,
            todoVal:state=>state.inputVal
          })
      },

actions
    用來處理異步 以及一些業務邏輯

    actions里面所以的函數都會有2個參數
    參數1 為一個對象 包含{commit dispatch state}
    參數2:是傳遞過來的參數


    actions里面的方法如果想要觸發的時候必須通過dispatch
    


    輔助函數
    mapActions

      方案一：
        methods: {
            ...Vuex.mapActions(["handleAdd"])
          }


      方案二：
           methods: {
              ...Vuex.mapActions({
                  Add:"handleAdd"
              })
          }

mutations
    用來做數據的增刪改查   mutations里面的方法用來修改state中的數據

    mutations里面的所有函數都會有2個參數
      參數1：state
      參數2：傳遞過來的參數


    mutations里面的方法想要觸發的時候必須通過commit



    輔助函數
    mapMutations
          methods: {
            ...Vuex.mapMutations(["handleMutationAdd"])
          }


           methods: {
            ...Vuex.mapMutations({
              handleMutationAdd:"handleMutationAdd"
            })
          }




  getters:
      getters就相當於組件中的computed一樣，也是可以進行數據的緩存
      主要的作用：監聽state中數據的變化，當state中的數據發生改變的時候就會觸發getters里面的方法


      getters中的每一個函數都會有一個參數 這個參數是state


      輔助函數
      mapGetters


      computed:{
        ...Vuex.mapGetters(["方法名稱"])
      }

      computed:{
        ...Vuex.mapGetters({
          key:"方法名稱"
        })
      }


  modules:
      做模塊的划分
      
      在多人協作中，如果不按照模塊的划分來管理數據的話，會導致當前store的數據難以管理
      因此我們需要按照模塊來去划分。(一個糧倉，大米倉庫，小米的倉庫，高粱的倉庫)

      一定要在子模塊中寫一個屬性namespaced:true   這樣每一個模塊都有自己獨立的作用域了

   如何保存vuex的數據狀態？

    使用瀏覽器自帶的localStorage進行存儲

存儲：
    localStorage.setItem(key,val)

獲取：
    localStorage.getItem(key)