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)

vue的数据管理(vuex)

猜你喜欢