目录介绍开始安装 ①直接下载方式 ②CND方式③NPM方式④Yarn方式NPM方式安装的使用方式 store概念及使用概念:定义使用mutations概念及使用概念:使用:定义使用a
Vuex是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据共享
创建一个 vuex.js 文件 将https://unpkg.com/vuex
这个网址里的内容放到该文件夹里。
npm install vuex --save
yarn add vuex
1.在 scr 文件里创建一个 store / index.js 的文件夹,写入以下内容。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
})
2.在main.js 里引入,然后挂载到 Vue 实例里
import Vue from 'vue'
import store from './store'
new Vue({
render: h => h(App),
store
}).$mount('#app')
就是组件之间共享数据的。
只有 mutations 才能修改 store 中的数据
使用:
先定义后使用
state: {
num: 0
}
方式1(推荐)
<div>{{ numAlias }}</div>
import { mapState } from 'vuex'
export default {
//计算函数
computed: mapState({
// 传字符串参数 'count' 等同于 `state => state.count`
numAlias: 'num',//常用key是自己起的名随便 value接收的数据
// 箭头函数可使代码更简练
count: state => state.count,
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
//可以定义其余的计算函数
}),
//或者这样
//计算函数
computed: {
mapState(['count'])
}
}
方式2
<div>{{ $store.state.count }}</div>
修改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,而不能使用mutation,但是在action中还是要通过触发mutation的方式间接变更数据。
Action 类似于 mutation,不同在于:
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)
}
}
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>
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注编程网的更多内容!
--结束END--
本文标题: vuex的核心概念和基本使用详解
本文链接: https://www.lsjlt.com/news/159903.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0