vuex的几种方法和作用(vuex学习目标是什么教程)

vuex的核心概念和基本用途是什么？我相信很多没有经验的人都不知所措。为此，本文总结了问题产生的原因及解决方法。希望你能通过这篇文章解决这个问题。

介绍

Vuex是管理组件全局状态(数据)的机制，可以方便地实现组件间的数据共享。

00-1010

开始

安装

创建一个vuex.js文件，并将https://unpkg.com/vuex的内容放在这个文件夹中。

00-1010脚本src=' https://cdn.jsdelivr.net/NPM/es6-promise @ 4/dist/es6-promise . auto . js '/脚本

直接下载方式

npminstallvuex-save

CND方式

yarnaddvuex

NPM方式

从“vue”导入

importVuexfrom'vuex '

Vue.use(Vuex)

exportdefaultnewVuex。商店({ 0

state:{}，

突变：{}，

actions:{}，

modules:{}

})2.在main.js中引入它，然后在Vue实例中挂载它。

从“vue”导入

importstorefrom ' '。/store '

newVue({ 0

render:h=h(App)，

商店

}).$ mount ('# app')

Yarn方式

NPM方式安装的使用方式

是在组件之间共享数据。

只有突变才能修改存储中的数据。

使用：

使用前定义。

store概念及使用

state:{

num:0

}

概念：

方式1(推荐)

div{{numAlias}}/div

从“vuex”导入{ mapState }

exportdefault{

//计算功能

computed:mapState封装状态({ 0

//传递字符串参数“count”等于“state=state”。伯爵`。

NumAlias:'num '，//常用的密钥是自命名随机值接收的数据。

//箭头功能可以使代码更加简洁。

count:state=state.count，

//为了能够使用“this”来获取本地状态，必须使用general函数。

countPlusLocalState(state){ 0

returnstate . count this . local count

（=NationalBureauofStandards）国家标准局

p; }
    //可以定义其余的计算函数
  }),
  //或者这样
  //计算函数
  computed: {
    mapState(['count'])
  }
}

方式2

<div>{{ $store.state.count }}</div>

mutations概念及使用

概念：

修改store里的数据，严格规定不能在其余的地方修改store的数据，mutations里不要执行异步操作。

mutation 必须同步执行,不能异步执行。

使用：

先定义方法后使用

定义

mutations: {
	//increment自定义方法 store参数是store数据, parameter参数是接收到的数据,可不要
    increment (state, parameter) {
        // 变更状态
        state.num++
    }
}

使用

方式1(推荐使用)

import { mapState, mapMutations } from 'vuex'
//方法
methods: {
	...mapMutations([
	    // mutations自定义的方法名
    	'increment'
    ]),
    love() {
    	// 直接this调用 this.increment('需要传过去的数据,可不要')
        this.increment('Bin')
    }
}

方式2

methods: {
    love() {
    	// this.$store.commit('自定义的名称', '传过去的数据,可不传')
    	this.$store.commit('increment', 'data')
    }
}

action概念及使用

概念：

用于处理异步操作。

如果通过异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方式间接变更数据。

Action 类似于 mutation，不同在于：

• Action 提交的是 mutation，而不是直接变更数据(状态)。

• Action 可以包含任意异步操作。

定义

mutations: {
	//increment自定义方法 store参数是store数据, parameter参数是接收到的数据,可不要
    increment (state, parameter) {
        // 变更状态
        state.num++
    }
},
actions: {
	//add 自定义方法 context是参数，可以把它当作vuex的实例
    add(context) {
    	//可以通过context.commit('mutations中需要调用的方法')
    	context.commit('increment')
    }
}

使用

方式1(推荐)

import { mapState, mapMutations, mapActions } from 'vuex'
export default {
  methods: {
    ...mapActions([
      'add', // 将 `this.add()` 映射为 `this.$store.dispatch('add')`
      // `mapActions` 也支持载荷：
      'add' // 将 `this.add(amount)` 映射为 `this.$store.dispatch('add', amount)`
    ]),
    ...mapActions({
      add: 'add' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    }),
    love() {
    	// 直接this调用 this.add('需要传过去的数据,可不要')
    	this.add(data)
    }
  }
}

方式2

methods: {
    love() {
    	// this.$store.dispatch('自定义的名称', '传过去的数据,可不传')
    	this.$store.dispatch('add', data)
    }
}

getters概念及使用

概念：

getter用于对store中的数据进行加工处理形成新的数据。getting可以对store中已有的数据加工处理之后形成新的数据，类似Vue的计算缩写。

定义

state: {
  num: 0
},
getters: {
    doneTodos: state => {
    	return state.num = 10
    }
}

使用

方式1(推荐)

<div>{{ doneTodos }}</div>

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  //计算函数
  computed: {
  	...mapState(['count']),
  	...mapmapGetters(['doneTodos'])
  }
}

方式2

<div>{{ $store.getters.doneTodos }}</div>

看完上述内容，你们掌握vuex的核心概念和基本使用是怎么样的的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注行业资讯频道，感谢各位的阅读！