vuex使用心得

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

　　通俗点讲就是管理各种交互数据的

什么情况下使用Vuex?

　　当自己因为组件间数据交互越来越复杂,而代码越写越迷糊时,就可以使用Vuex了

安装Vuex

1. 直接去官网下载,然后再script中引用,就像jquery一样,(这样引用除非是写demo练习,实际工作中好像没人这样用,反正我没用过)
2. 使用Vue-cli时 npm install vuex --save ,在一个模块化的打包系统中，必须通过 Vue.use()来安装 Vuex：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

开始使用

创建一个 store, 直接store.state就可以获取状态对象;使用模块化时,把store挂载到Vue实例上,全局使用this.$store.state获取对象

    const store = new Vuex.Store({

      state: {

        count: 0

      }

      // state 使用模块化的话,可以单独写一个js引入

    })

    console.log(store.state.count) // => 0

　　//模块化时需要挂在到Vue实例

　　new Vue({

　　　　el: '#app',

　　　　store

　　})

　　console.log(this.$store.state.count) // => 0

核心概念

Vuex.Store()中传入的参数

　　state : 定义原始数据 通过 this.$store.state 获取,还可以通过vuex封好的api mapState获取

import { mapState } from 'vuex'
  computed: {
    ...mapState({
      // count: 'count',
      // count: state => state.count
    })
  }
// 传入数组
...mapState([
  'count'  
])
//this.count访问

　　mutations: 更改 Vuex 的 store 中的状态, mutations对象里面定义一个函数, 函数里面只能写同步函数,通过this.$store.commit('changeCount', 999999999)改变count,也可以mapMutation改变

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    changeCount (state, n) {
      state.count = n
    }
  }
})                                                
// mutations中changeCount为自己定义的函数,state为定义的原始数据对象,n为传进参数,多个参数需以对象形式传入
this.$store.commit('changeCount', 999999999)      
// 此时count 为 999999999
import {mapMutations} from 'vuex'
methods: {
  ...mapMutations({
    changeCount: 'changeCount'
  })
}                                                 
//此时可以调用this.changeCount(999999999)改变count

　　getters: 获取数据,获取原始数据或者把原始数据处理成自己想要的格式暴露出来,getters里面自定义一个函数getNewCount,参数state为原始数据对象,通过this.$store.getters.getNewCount触发,也可以通过mapGetters触发

  getters: {
    getNewCount (state) {
      return state.count + 1
    }
  }
　　// count自定义函数state原始数据对象
  this.$store.getters.getNewCount
　　// 触发getters  得到1
  import {mapGetters} from 'vuex'
  computed: {
    ...mapGetters({
      newCount: 'getNewCount'
    })
  }
　　// this.newCount访问
  getters: {
    count(state => state.count)
  }
　// 一般获取count原始值用getters包装一层,不直接用this.$store.state获取

　　actions: actions 类似于 mutations, actions 提交的是 mutations，而不是直接变更状态。actions 可以包含任意异步操作。当多个mutations要同时触发时,可以通过actions封装一个自定义函数all,通过this.$store.dispatch('all', {count: 1, num: 2})触发, 也可用mapActions触发

  mutations: {
    changeCount (state, n) {
      state.count = n
    },
    changeNum (state, n) {
      state.num = n
    }
  },
  actions: {
    all (store, {count, num}) {
      store.commit('changeCount', count)
      store.commit('changeNum', num)
    }
  },
  // 再定义一个原始数据num: 0,mutations中添加一个改变num的函数,
  //actions中all为自定义函数,参数store等价于new Vue.Store()出来的实例,剩余参数需要以对象形式传入
  this.$store.dispatch('all', {count: 1, num: 2})
  // actions中的all函数会同时触发'changeCount','changeNum'改变数据
  import {mapMutaions} from 'vuex'
  methods: {
    ...mapActions({
      all: 'all'
    })
  }
  // 直接调用 this.all({count: 1, num: 2}) 改变数据

　　modules: 当应用变得非常复杂时, 将 store 分割成模块。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

• • 给modules添加原始数据state

     modules: {
       A: {
         state: {
           name: "A"
         }
       },
       B: {
         state: {
           name: 'B'
          }
       }
    }
    //分别定义AB模块 this.$store.state.A.name 为'A'; 同理 this.$store.B.name 为 'B'
    ...mapState({
　　　A: state => state.A.name,
　　　B: state => state.B.name　
　　})
　　//在mapState中就要以函数的形式映射出模块下的A,B

• • 给modules添加mutations, 默认情况下，模块内部的 mutations是注册在全局命名空间的——这样使得多个模块能够对同mutations作出响应。

modules: {
  A: {
    state: {
      name: "A"
    },
    mutations: {
      changeAName (state, name) {
        // 这里state只是A模块下的原始数据
        state.name = name
      }
    }
  }
}
//默认情况下通过 this.$store.commit('changeAName', 'a') 触发来改变A中的name, mapMutations中也一样
  ...mapMutations({
    changeAName: 'changeAName'
  })
this.changeAName('a')

　　　如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 mutation 都会自动根据模块注册的路径调整命名。getters和actions同理

A：{
  namespaced: true 
}
this.$store.commit('A/changeAName', 'a')
//这里把模块名A作为自定义函数changeAName的前缀，'A/changeAName'来触发,mapMutations中同理
...mapMutations({
   changeAName: 'A/changeAName'
})
this.changeAName('a')

• • 给modules添加getters, 默认情况下和mutations一样,自定义的函数在全局中不用加前缀可自由访问, 当存在namespaced: true时需要添加前缀访问, 模块下getters中自定义函数的形参有所不同,当我们处理A模块下的数据时需要用到全局下的数据时,就可以通过形参完成

A: {
  namespaced: true,
  getters: {
    getAName (state, getters,  rootState, rootGetters) {
    // state => A模块下的数据,
    // getters => A模块下的getters自定义函数
    // rootStete => 全局state数据
    // rootGettres => 全局getters的自定义函数 
      return state.name
    }
  }
}

　　//this.$store.getters['A/getAName']访问 mapGetters中 this.AName访问

　　...mapGetters({

　　AName: 'A/getAName'

　　})

给modules添加actions时同上, 不同的还是actions中自定义函数的形参

actions: {
  aAction (ctx, {name, n}) {
  　// 还记的一个actions触发多个mutations需要传参必须以对象形式传入, name为changeAName的参数, n为changeCount的参数
    ctx.commit('changeAName', name) // 触发A模块下mutations自定义函数changeAName
    ctx.commit('changeCount', n, {root: true}) // 加入{root: true}触发全局中mutations中的自定义函数changeCount, 
  },
  otherAction ({commit, state, rootState}, data) {
    // 上述ctx包含多个对象可以结构出来使用  state为A模块下的数据 rootState为全局数据 data为自己传入的对象
  }
}
this.$sotre.dispath('A/aAction', {name: 'a', n: 999999999}) 
// 触发A模块的changeAName把name改为'a',触全局的changeCount把count改为999999999,在mapActions中如下
...mapAction({

  aAction: 'A/aAction'
})
this.aAction({name: 'a', n:999999999})

 

... 待续

 

转载于:https://www.cnblogs.com/guilishabai/p/9344527.html