vuex使用心得

Posted guilishabai

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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

核心概念

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

 

... 待续

 






以上是关于vuex使用心得的主要内容,如果未能解决你的问题,请参考以下文章

Vue项目中如何快速上手Vuex状态管理--使用心得-值得珍藏

前台商城网站项目心得

vuex的使用

前端框架Vue自学之Vuex

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家