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','张嘀嗒')

---

欢迎交流！