关于vue.js:VUEX属性详解

在工作中应用 VUEX 进行状态治理，共享数据是十分不便的，要留神的是 vuex 的数据是存储在浏览器的内存中的，如果F5刷新了页面那之前申请的内存就会被开释，从新加载 js 脚本，这样一来咱们之前存在 vuex 中的数据就没了。如果咱们的一些重要的数据，例如 token 等，想要长时间的寄存，能够寄存在 localStorage/cookes 中。vuex 总共有 5 个属性供咱们进行数据管理，具体如下：

• state:
  是vuex中存放数据的最小也是最根本的单元，vuex的数据源。惯例页面对于state中的数据最好只读取不要进行间接的批改，如果须要批改 state 中的属性值，能够通过官网举荐的 mutations 进行批改，具体用法请往下看。

    state:{
        name: '一蓑烟雨任平生',
        count: 10
    }
    //应用办法 this.$store.state.name

• mutations:
  相当于是 vuex 中的 methods，能够定义各种办法来进行对数据的解决，引入的第一个参数个别是 state 对象，第二个参数能够是通过函数传递过去进行操作的数据，在惯例页面中触发 mutations 须要应用 commit 办法，罕用$store.commit(‘your evevt’,data)，在 actions 中触发 mutations 中的办法能够在 actions 的办法中传入一个 context 对象，通过 context 来操作 mutations 中的办法，具体用法请往下看。

    mutations:{
        changeName(state, val){
            state.name = val
        }
    }
    //应用办法 this.$store.commit('changeName', '张嘀嗒')

• actions:
  actions 和 mutations 一样，都是用于存储办法的属性，然而 actions 是用来存储有异步行为的办法的，咱们对于接口的申请就能够存在 actions 中，要留神的是，咱们仍旧不要间接批改 state 中的数据，如果波及到对 state 中数据进行批改的操作，还是通过 mutations 中的办法作为媒介来更改 state 中的数据，能够在 actions 的办法中承受一个参数 context 放在第一个地位，而后通过 context.commit(‘mutations Event’,val) 的模式触发 mutations 中的办法实现对 state 中的数据的批改。

    actions:{
        GET_NAME(context, val){
            console.log(context)    //打印进去你还能在上下文对象里看到 state
            context.commit('changeName', val)
        }
    }
    //应用办法 this.$store.dispatch('GET_NAME', '张嘀嗒')
  

• getters:
  相当于是 vuex 中的计算属性，用法和 vue 中的 computed 相似，能够在 getters 中援用 state 中的数据进行二次解决，而后在页面中能够间接援用该值，在 getters 的办法中一个 state 参数获取到 state 的数据，解决之后间接 return 就能应用了。

    getters:{
        doubleCount(state){    // state 中 count 的平方
            return state.count * state.count
        }
    }
    //应用办法 this.$store.getters.doubleCount

• modules:
  将 vuex 给模块化，每一个独自的模块都有单独的 state、mutations、actions、getters 这样能够使构造更加的清晰明了。当我的项目比拟大的时候，咱们难保没有重名的办法，这样在应用 dispatch/commit 进行调用的时候，可能会呈现调用一个办法却执行了多个的状况，为解决这个状况，咱们能够在每个模块的 js 文件外面加上 namespaced: true 属性，这样就能将该模块的名字作为惟一标识去作为辨别，这样就不会搞混了，只是调用的时候须要留神，办法前须要加上模块名。

    //一个独自的模块 user.js 文件，设置 namespaced: true
    export default{
      namespaced: true,        //设置命名空间
      state: {
        name: '管理员信息',
        id: 'FD57F54D5F7SD5'
      },
      mutations: {
        changeName(state, value){
          state.name = value
        }
      },
      actions: {
        GET_NAME(context, val){
          console.log(context.state);
          setTimeout(() => {
            context.commit('changeName','更改胜利')
          },500)
        }
      }
    }

  ---

    import Vue from 'vue'
    import Vuex from 'vuex'
    import user from './modules/user' //引入模块一
    import customer from './modules/customer'    //引入模块二
  
    Vue.use(Vuex)
    export default new Vuex.Store({
         modules: {
            user,
            customer
          }
    })
  

        //这样当咱们在页面中想要调用模块一中 GET_NAME 的办法的时候就须要在办法名前加上模块名了
        this.$store.dispatch('user/GET_NAME','张嘀嗒')

欢送交换！