Vuex实用分享

托马斯和他的朋友们
895 阅读2分钟

前言

在我们平时项目中，状态管理工具可谓是用途广泛，并且给我们提供了很多的便利，尤其是在全局状态管理中，像vuex、redux、dva等等， 但是，我发现很多小伙伴们对于这些状态管理工具并不是很擅长，我也一样，在我以前写vue项目中，一碰到要用vuex全局管理一个状态时就很头疼，上网上扒代码，功能勉强能实现，于是我抽空上网上找了一个教学视频，主要是讲vuex的，学习了一下，并且把学习到的知识分享给大家。
在vuex的官网中是这样说的

Vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

意思就是vuex是一个状态管理工具，vue专用的，还可以集成到vue调试工具中，还有很多高级功能等等。。。。

其实我们常用的不是它的高级功能，而是用它来管理状态。下面，我就跟大家具体讲一下vuex是怎么来管理全局状态的。

安装Vuex

npm install vuex --save 或者 yarn add vuex

创建一个store

什么是store？百度翻译了一下，store的意思就是商店，其实我们也可以称之为仓库，存放状态或者数据的仓库，任何页面组件都可以从仓库里拿到东西。

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters:{},
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions:{}
})

这就是store文件，再把它引入到main.js中

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

这样，我们就可以在页面中使用store里的状态和方法了。

从上面store文件里我们可以看出，在初始化Vuex.Store这个对象时，里面传了state、getters、mutations和actions这四个对象，下面我们就详细的将一下这四个对象。

State: 状态

在vuex里所有的状态都会在state里定义，例如：

 state : {
  str: '这是vuex的数据',
  name:'李四'
}

数据定义完了，我们应该如何使用它呢？

在组件里使用：

<div> {{$store.state.name}} <div>

或者

mounted(){
	console.log(this.$store.state.name)
}

不过，我更推荐使用辅助函数mapState并且放在vue的计算属性里

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  computed:{
    ...mapState(['name']),
  },
}
</script>

这样就可以这样使用了

console.log(this.name)

是不是感觉方便了许多

Getters: 计算属性--对数据进行二次加工

定义：

getters: {
	getStr(state){
    	return state,str+'计算属性'
    }
}

使用

还是利用辅助函数

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  name: 'App',
  computed:{
    ...mapState(['name']),
    ...mapGetters(['getStr'])
  },
}
</script>

console.log(this.getStr)

注：像state和getters这样与属性相关的，统统放到计算属性computed里去

Mutations: 更改Store里的state唯一方法

如标题所说，更改state的唯一方法就是提交mutaition,每个mutation都是个函数，里面有两个参数，一个是state,一个是payload, state就是我们store里的state而payload是一个对象，里面放的就是我们传进来的参数

定义:

mutations：{
	setName(state,payload){
    	    state.name = payload.name
    }
}

使用：

methods:{
    ...mapMutations(['setName']),
    btn(name){
    	this.setName({name})
    }
}

注：在mutations里必须使用同步函数，使用异步函数会使调试非常复杂，那么我们要想使用异步函数怎么办呢？别着急，actions来了

Actions:

actions和mutations类似，不同在于：

  1. Action 提交的是 mutation，而不是直接变更状态。
  2. Action 可以包含任意异步操作。

定义

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

action 提交的是mutation，不能直接改变状态，而且action函数里包含参数为context,相当于store，但是我们一般只用到commit方法，所以可以解构为

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment ({commit}) {
      commit('increment')
    }
  }
})

使用

import { mapActions } from 'vuex'

export default {
  // ...
  methods: {
    ...mapActions(['increment','incrementBy']),
    open(){
    	this.increment()
    }
  }
}

或者

this.$store.dispatch('increment',{name:'张三'})

总结

在使用vuex中我总结了很多经验，比如每个state、getters、mutations和actions都可以分成一个文件夹，每个文件夹可以建很多js文件，每个js文件都是不同的组件在使用，最后再注册在store中，这样哪个方法或状态用在哪个组件里就可以显而易见了。

大家在自己项目实践中可以慢慢积累经验，也希望我这篇文章能够帮助到大家。

avatar
文章
阅读
粉丝