vuex的使用

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vuex的使用相关的知识,希望对你有一定的参考价值。

参考技术A

vuex适合用于多组件共享数据的情况,多个组件都能读,也都可以改。

vuex的执行流程:

安装

使用

vuex是一个插件,所以需要Vue.use

注册了vuex,我们就可以在vue里配置store了

getters

这里多了个配置 getters ,他可以看作是基于state的computed属性。使用的方式基本如下:

同时getters还可以配置成函数,方便我们动态传参,满足一些复杂一点的场景

调用

模块化store

随着项目迭代,需求的扩展,你的store会变得越来越臃肿,建议模块化拆分store

以上就是一些对象的拼装,但是模块要放到名为modules的属性内部,store的最终结构大致如下:

模块的命名空间
默认模块的state、getter等属性都会合并到根级别,如果你希望模块有更好的封装性,避免多模块命名污染,可以配置上命名空间属性namespace:true

使用了模块命名空间后,action和getter内部常规用法只能访问本命名空间的dispatch,commit或者getter,如果要访问全局命名空间,需要使用额外的参数和配置:

模块动态注册

在 store 创建之后,你可以使用 $store.registerModule 方法注册模块

如果大多场景下,你的模块化store并不会被使用,只在你的业务流程页面中被用到,这时可以考虑在合适的生命周期节点(比如created)动态注册你的模块。同时要注意先检查模块是否已经被安装: $store.hasModule(moduleName) ,避免重复注册模块,不然会出现逻辑问题。你也可以卸载自己的模块: $store.unregisterModule(moduleName)

官方文档

vuex的使用详细说明

目录:vuex的使用详细说明

1.概念

2.使用流程

3.vuex原理

4.vuex的基础使用

5.四个map方法的使用

6.模块化+命名空间

概念

vuex是一种状态(数据)管理工具。

使用流程

  1. 下载包
npm install vuex
  1. 导入包
import Vuex from 'vuex'
  1. 注册
Vue.use(Vuex)
  1. 定义规则
const state=
const mutations=
const actions=
const getters=
const modules=
  1. 创建实例对象,并暴露
const store=new Vuex.Store(
    state,
    mutations,
    actions,
    getters,
    modules
)
  1. 挂载
new Vue(
  render: h => h(App),
  store,
).$mount('#app')

  1. 使用

vuex原理

当修改vue的dom对象,

vuex会首先调用dispacth方法修改actions中的数据,

再通过commit方法修改mutations中的数据,

然后通过mutate把修改的值传到state中,

然后render重新更新视图。

vuex的基础使用

全部代码:

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)

const actions = 
    //响应组件中加的动作
	jia(context,value)
		// console.log('actions中的jia被调用了',miniStore,value)
		context.commit('JIA',value)
	,


const mutations = 
    //执行加
	JIA(state,value)
		// console.log('mutations中的JIA被调用了',state,value)
		state.sum += value
	


//初始化数据
const state = 
   sum:0


//创建并暴露store
export default new Vuex.Store(
	actions,
	mutations,
	state,
)
getters的使用
  1. 概念:当state中的数据需要经过加工后再使用时,可以使用getters加工。

  2. store.js中追加getters配置

......

const getters = 
	bigSum(state)
		return state.sum * 10
	


//创建并暴露store
export default new Vuex.Store(
	......
	getters
)

四个map方法的使用

  1. mapState方法:用于帮助我们映射state中的数据为计算属性
computed: 
    //借助mapState生成计算属性:sum、school、subject(对象写法)
     ...mapState(sum:'sum',school:'school',subject:'subject'),
         
    //借助mapState生成计算属性:sum、school、subject(数组写法)
    ...mapState(['sum','school','subject']),
,
  1. mapGetters方法:用于帮助我们映射getters中的数据为计算属性
computed: 
    //借助mapGetters生成计算属性:bigSum(对象写法)
    ...mapGetters(bigSum:'bigSum'),

    //借助mapGetters生成计算属性:bigSum(数组写法)
    ...mapGetters(['bigSum'])
,
  1. mapActions方法:用于帮助我们生成与actions对话的方法,即:包含$store.dispatch(xxx)的函数
methods:
    //靠mapActions生成:incrementOdd、incrementWait(对象形式)
    ...mapActions(incrementOdd:'jiaOdd',incrementWait:'jiaWait')

    //靠mapActions生成:incrementOdd、incrementWait(数组形式)
    ...mapActions(['jiaOdd','jiaWait'])

  1. mapMutations方法:用于帮助我们生成与mutations对话的方法,即:包含$store.commit(xxx)的函数
methods:
    //靠mapActions生成:increment、decrement(对象形式)
    ...mapMutations(increment:'JIA',decrement:'JIAN'),
    
    //靠mapMutations生成:JIA、JIAN(对象形式)
    ...mapMutations(['JIA','JIAN']),

模块化+命名空间

  1. 目的:让代码更好维护,让多种数据分类更加明确。

  2. 修改store.js

const countAbout = 
  namespaced:true,//开启命名空间
  state:x:1,
  mutations:  ... ,
  actions:  ... ,
  getters: 
    bigSum(state)
       return state.sum * 10
    
  


const personAbout = 
  namespaced:true,//开启命名空间
  state: ... ,
  mutations:  ... ,
  actions:  ... 


const store = new Vuex.Store(
  modules: 
    countAbout,
    personAbout
  
)
  1. 开启命名空间后,组件中读取state数据:
//方式一:自己直接读取
this.$store.state.personAbout.list
//方式二:借助mapState读取:
...mapState('countAbout',['sum','school','subject']),
  1. //方式一:自己直接读取
//方式一:自己直接读取
this.$store.getters['personAbout/firstPersonName']
//方式二:借助mapGetters读取:
...mapGetters('countAbout',['bigSum'])
  1. 开启命名空间后,组件中调用dispatch
//方式一:自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二:借助mapActions:
...mapActions('countAbout',incrementOdd:'jiaOdd',incrementWait:'jiaWait')
  1. 开启命名空间后,组件中调用commit
//方式一:自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二:借助mapMutations:
...mapMutations('countAbout',increment:'JIA',decrement:'JIAN'),

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

vuex的基本使用

vuex的使用,vuex数据调用

vuex的使用

vuex的使用详细说明

vuex的使用详细说明

Vuex 面试题:使用 vuex 的核心概念