目录
Vuex 是什么?
是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间数据的共享。
仓库vuex的作用:
能够在vuex中集中管理共享的数据,易于开发和后期维护;
能够高效地实现组件之间的数据共享, 提高开发效率;
存储在 vuex中的数据都是响应式的,能够实时保持数据与页面的同步。
什么样的数据适合存在 vuex?
组件中需要共享的数据。
Vuex 使用
引入方式:
第一种方式:通过CDN引入
第二种方式:npm i vuex -save下载包再进行配置
npm i vuex --save
创建 store 对象
const store = new Vuex.Store({
// state 中存放的是全局共享的数据
state: {
count: 0
},
mutations: {
},
actions: {
}
})
在main.js中配置:
//导入vuex:
import Vuex from "vuex"
Vue.use(Vuex)
//创建仓库
const store=new Vuex.Store({
//这里可以配置state、actions、mutaitions等
})
//挂载到vm对象
new Vue({
render(h){return h(app)},
router,
store//挂载以后 所有的组件就可以直接从store中获取全局数据
}).$mount( "#app")
第三种方式:vue cli脚手架自己配置,在vue create "项目名"时,选择上vuex,脚手架会自动帮我们创建成功。
Vuex 的核心概念
主要核心概念有:
- State
- Mutation
- Action
- Getter
State
State 提供唯一的公共数据源,所有共享的数据要统一放到 Store 的 State 中进行存储。
// 创建 store 数据源,提供唯一的公共数据
const store = new Vuex.Store({
state: { count: 0 }
})
组件访问 State 中数据的第一种方式:
this.$store.state.全局数据名称
组件访问 State 中数据的第二种方式:
// 1. 从 vuex 中按需导入 xxx 函数
import { xxx } from 'vuex'
Mutation
Mutation 用于变更 Store 中的数据
- 只能通过 mutation 变更 Store 数据,不可以直接操作 Store 中的数据。
- 通过这种方式虽然操作起来稍微繁琐一些,但是可以集中监控所有数据的变化。
// 定义 Mutation
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
// 变更状态
state.count++
}
}
})
触发方式1
// 触发 mutation
methods: {
handle1(){
// 触发 mutations 的第一种方式
this.$store.commit('add')
}
}
可在触发时传递参数
// 定义 Mutation
const store = new Vuex.Store({
state: {
count: 0
},
mutation: {
addN(state, step) {
// 变更状态
state.count += step
}
}
})
// 触发 mutation
methods: {
handle2(){
// 在调用 commit 函数
// 触发 mutations 时携带参数
this.$store.commit('addN', 3)
}
}
触发 mutations 的第二种方式:
// 2. 从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'
// 2. 将需要的 xxx 函数,映射为当前组件的 methods 方法
methods: {
... xxx(['add', 'addN'])
}
Action
Action 用于处理异步任务。
如果通过异步操作变更数据,必须通过 Action,而不能用 Mutation,但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。
// 定义 Action
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
state.count++
}
},
actions: {
// Async 就是异步的意思,下面这个方法是延迟 1000ms 后执行 add
addAsync(context) {
setTimeout(() => {
context.commit('add')
}, 1000)
}
}
})
// 触发 Action,支持携带参数
methods: {
handle() {
// 触发 actions 的第一种方法
this.$store.dispatch('addAsync')
}
}
// 触发 Action
methods: {
handle() {
this.$store.dispatch('addNAsync', 5)
}
}
触发 actions 的第二种方式:
// 2. 将需要的 actions 函数,映射为当前组件的 methods 函数
methods: {
... mapActions(['addASync', 'addNASync'])
}
Getter
Getter 用于对 Store 中的数据进行加工处理形成新的数据。
- Getter 可以对 Store 中已有的数据加工处理之后形成新的数据,类似 Vue 中的计算属性。
- Store 中数据发生变化,Getter 的数据也会跟着变化。
// 定义 Getter
const store = new Vuex.Store({
state: {
count: 0
},
getters: {
showNum: state => {
return '当前最新的数量为[' + state.count + ']'
}
}
})
使用 getters 的第一种方式:
this.$store.getters.名称
使用 getters 的第二种方式:
import { mapGetters } from 'vuex'
computed: {
...mapGetters(['showNum'])
}
State | this.$store.state.全局数据名称 |
Mutation | this.$store.commit('add') |
Action | this.$store.dispatch('addAsync') |
Getter | this.$store.getters.名称 |