vuex使用心得

Posted 2020-12-05 guilishabai

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

核心概念

Vuex.Store()中传入的参数

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

mport { 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、甚至是嵌套子模块——从上至下进行同样方式的分割

 

... 待续