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)
上一篇:Vuex基础-mutations


下一篇:一位面试者提到直接调用vuex中mutations方法