欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vuex简单入门基础

程序员文章站 2022-09-11 13:40:22
一.什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理架构。它借鉴了 Flux 和 Redux的设计思想,它采用集中式存储管理应用的所有组件的状态,并以相...

一.什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发状态管理架构。它借鉴了 Flux 和 Redux的设计思想,它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。。状态?理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。

二.Vuex的组成部分

完整的应用Vuex开发的应用结构应该是这样的:

Vuex简单入门基础

1.State

State负责存储整个应用的状态数据,一般需要在使用的时候在跟节点注入store对象,后期就可以使用this.$store.state直接获取状态

//store为实例化生成的
import store from './store'

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

这个store可以理解为一个容器,包含着应用中的state等。实例化生成store的过程是:

const mutations = {...};
const actions = {...};
const state = {...};

Vuex.Store({
  state,
  actions,
  mutation
});

后续在组件中使用的过程中,如果想要获取对应的状态你就可以直接使用this.$store.state获取,当然,也可以利用vuex提供的mapState辅助函数将state映射到计算属性中去,如

//我是组件
import {mapState} from 'vuex'
export default {
  computed: mapState({
    count: state => state.count
  })
}

2.Mutations

Mutations的中文意思是“变化”,利用它可以更改状态,本质就是用来处理数据的函数,其接收唯一参数值state。store.commit(mutationName)是用来触发一个mutation的方法。需要记住的是,定义的mutation必须是同步函数,否则devtool中的数据将可能出现问题,使状态改变变得难以跟踪。

const mutations = {
  mutationName(state) {
    //在这里改变state中的数据
  }
}
在组件中触发:
//我是一个组件
export default {
  methods: {
    handleClick() {
      this.$store.commit('mutationName')
    }
  }
}
或者使用辅助函数mapMutations直接将触发函数映射到methods上,这样就能在元素事件绑定上直接使用了。如:
import {mapMutations} from 'vuex'
//我是一个组件
export default {
  methods: mapMutations([
    'mutationName'
  ])
}

3.Actions

Actions也可以用于改变状态,不过是通过触发mutation实现的,重要的是可以包含异步操作。其辅助函数是mapActions与mapMutations类似,也是绑定在组件的methods上的。如果选择直接触发的话,使用this.$store.dispatch(actionName)方法。

//定义Actions
const actions = {
  actionName({ commit }) {
    //dosomething
    commit('mutationName')
  }
}
在组件中使用

import {mapActions} from 'vuex'
//我是一个组件
export default {
  methods: mapActions([
    'actionName',
  ])
}

4.Getters

有些状态需要做二次处理,就可以使用getters。通过this.$store.getters.valueName对派生出来的状态进行访问。或者直接使用辅助函数mapGetters将其映射到本地计算属性中去。

const getters = {
  strLength: state => state.aString.length
}
//上面的代码根据aString状态派生出了一个strLength状态
在组件中使用

import {mapGetters} from 'vuex'

//我是一个组件
export default {
  computed: mapGetters([
    'strLength'
  ])
}

5.Plugins

插件就是一个钩子函数,在初始化store的时候引入即可。比较常用的是内置的logger插件,用于作为调试使用。

import createLogger from 'vuex/dist/logger'
const store = Vuex.Store({
  ...
  plugins: [createLogger()]
})

三.demo

1.components\public\vuexHome.vue

vuex

<script> import vuexDemo from '../pack/vuexDemo' import vuexIncrement from '../pack/vuexIncrement' export default { name:"vuexHome", components: { vuexDemo:vuexDemo, vuexIncrement: vuexIncrement } } </script>#vuexHome{ text-align:center; }

2.components\pack\vuexDemo.vue

测试1:Count is {{count}}

<script> import { mapState } from 'vuex' export default { computed:{ count(){ //通过 store.state 来获取状态对象 return this.$store.state.count } } } </script>

3.components\pack\vuexIncrement.vue

+-

<script> import { mapState } from 'vuex' export default { data:function () { return { localCount:2 } }, methods:{ increment(){ //通过 store.commit 方法触发状态变更(mutation的方法) this.$store.commit('increment'); }, decrement(){ this.$store.commit('decrement'); } } } </script>

4.\store\store.js

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

export default new Vuex.Store({
	//创建一个对象来保存应用启动时的初始状态
	state:{
		 // 应用启动时, count置为0
		count:0
	},
	/*创建一个对象存储一系列我们接下来要写的 mutation 函数
	* mutation 函数是处理数据的函数,其接收唯一参数值state
	*store.commit(mutationName)是用来触发一个mutation的方法
	*/
	mutations:{
		increment:state => state.count ++,
		decrement:state => state.count --,
	}
}