安装Vuex
npm install vuex@3.6.2 -S
创建文件夹:store
在src下面创建一个文件夹(仓库的意思)
在store下创建index.js文件
import Vue from 'vue';
import Vuex from 'vuex'
// 1 安装插件
Vue.use(Vuex)
// 2 创建对象
const store = new Vuex.Store({})
// 导出
export default store
在main.js中挂载
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
State提供唯一的公共数据源,所有共享的数据都有统一放在Store的State中进行存储。
const store = new Vuex.Store({
// 作用:保存状态,用于共享
state: {
count: 0
},
mutations: {},
actions: {},
getters: {},
modules: {}
})
访问State中数据的第一种方式:
this.$store.state.属性名称
访问State中数据的第二种方式:
// 1 从vuex中按需导入mapState函数
import { mapState } from 'vue'
通过刚才导入的mapState函数,将当前组件需要的全局数据,映射为当前组件的computed计算属性:
compuated:{
// 前面需要三个点,为展开运算符,意思是将全局哪些数据映射为当前的一个计算属性
...mapState(['count'])
}
获取总结:两个方式都可以获取,根据实际需求来决定采用那种获取的方式
修改store里面的数据
mutation用于变更store中的数据
第一种方法:
- 只能通过mutation变更store数据,不可以直接操作Store中的数据
- 使用这个方法虽然有些繁琐,但是可以集中监控所有的数据变化
- 定义的时候后面需要加一个s
const store = new Vuex.Store({
// 作用:保存状态,用于共享
state: {},
// 作用:用于变更修改store里面的数据
mutations: {
add(state){
//变更状态
state.count++
}
},
})
触发mutation里面的函数,在需要调用的页面中这样写:
methods:{
btn(){
// 触发mutations的第一种方法
this.$store.commit('add');
}
}
可以触发mutations时传递参数:
const store = new Vuex.Store({
state: {},
mutations: {
addN(state, step) {
// 变更状态
state.count += step
}
}
})
触发mutation
methods:{
btn2(){
// 触发时传递参数
this.$store.commit('addN',10)
}
}
第二种方法:
从vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex';
methods:{
...mapMutations(['sub','subN']),
btn1(){
// 直接通过this进行调用
this.sub();
},
btn2(){
// 直接通过this进行调用
this.subN(10);
}
}
注意:mutations里面不能写异步代码
action用于在store里面执行异步操作
异步操作变更数据必须要用action,而不是使用mutation,但是使用action中还要通过触发mutaion的方式间接变更数据
第一种方法:
//定义
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
add(state) {
state.count++
}
},
//用于执行异步操作处理
actions: {}
})
// 调用
methods:{
btn3(){
// 触发actions的第一种方式
this.$store.dispatch('addAsync');
}
}
}
触发actions异步任务时携带参数
//定义
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
addN(state, step) {
// 变更状态
state.count += step
}
},
actions: {
addAsync2(context, step) {
setTimeout(() => {
context.commit('addN', step);
}, 1000)
}
}
})
//调用
methods:{
btn4(){
// 触发actions时携带参数
this.$store.dispatch('addAsync2',5);
}
}
}
第二种方法:
按需引用
import {mapActions} from 'vuex'
methods:{
...mapActions(['addASync','addNASync'])
}
getter用于对store中的数据进行加工处理形成新的数据。
getter只起到包装数据的作用,不会修改store里面的原数据
- getter可以对store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性
- store中数据发生变化,getter的数据也会发生变化。
const store = new Vuex.Store({
state: {
count: 0
}
getters: {
showNum: state => {
return '当前最新的数量是【' + state.count + '】';
}
}
})
使用getter第一种方式
$store.getters.showNum
// 前面的this可以省略掉
使用getter第二种方式
import {mapGetters} from 'vuex'
computed:{
...mapGetters(['showNum'])
}