有关vuex的相关基础知识
首先准备好vue项目文件夹(基于vue2)
项目目录结构如下
另新建一个store文件夹
首先是/store文件夹下面的index.js文件,如下代码
/*
* @Author: 孙大大
* @Date: 2022-03-05 10:30:45
* @LastEditTime: 2022-03-05 14:32:03
* @FilePath: \vuex_demo\src\store\index.js
*/
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 创建了一个仓库实例
const store = new Vuex.Store({
// 严格模式
strict: true,
// 配置项,核心概念
// 存储数据的地方 任何组件都可以访问这里面存储的数据
state: {
num: 100,
userInfo: {
username: '小智',
detail: {
age: 30,
gender: '男',
},
},
},
// mutations 唯一能修改数据的地方
mutations: {
// 形参1: 上面仓库的state的数据对象
// 形参2: 可选参数,接收外面传入的数据
changeNum(state, data) {
state.num += data
console.log(mutations)
},
},
// actions 异步修改数据
actions: {
// context: 上下文对象 里面有commit和dispatch可以直接使用
// data:可选参数,接收外部传入的对象
changeNumAsync(context, data) {
console.log('触发了changeNumAsync函数')
console.log(context)
console.log(data)
// context.commit('changeNum', data) 直接修改
setTimeout(() => {
console.log('触发了changeNumAsync函数')
context.commit('changeNum', data)
}, 2000)
},
},
// 建立快捷访问的方式
getters: {
userName(state) {
return state.userInfo.username
},
age: (state) => state.userInfo.detail.age,
gender: (state) => state.userInfo.detail.gender,
},
})
export default store
然后是/components文件下的两个组件Add.vue 与 Reduce.vue
Add.vue
<!--
* @Author: 孙大大
* @Date: 2022-03-05 10:36:34
* @LastEditTime: 2022-03-05 14:46:55
* @FilePath: \vuex_demo\src\components\add.vue
-->
<template>
<div>
<h1>添加组件</h1>
<p>共享数据num的值: {{ $store.state.num }}</p>
<!-- 不推荐使用$store.state.num++这种方式修改数据 -->
<!-- 缺点: 1.调试器不能同步 2.严格模式下会报错 -->
<!-- <button @click="$store.state.num += 10">num+10</button> -->
<button @click="$store.commit('changeNum', 10)">num+10</button>
<!-- 异步修改 -->
<button @click="$store.dispatch('changeNumAsync', 5)">异步修改num+5</button>
<!-- 快速访问数据 -->
<p>用户的名字:{{ $store.getters.userName }}</p>
<p>用户的年龄:{{ $store.getters.age }}</p>
<p>用户的性别:{{ $store.getters.gender }}</p>
</div>
</template>
<script>
// state访问的方式一 $store.state.num
// 触发 mutations 修改state数据的方式一 $store.commit('fn',data)
// 触发 actions 异步修改state数据的方式一 $store.dispatch('fn',data)
export default {}
</script>
<style></style>
Reduce.vue
<!--
* @Author: 孙大大
* @Date: 2022-03-05 10:36:49
* @LastEditTime: 2022-03-05 14:58:02
* @FilePath: \vuex_demo\src\components\Reduce.vue
-->
<template>
<div>
<h1>减少组件</h1>
<p>共享数据的值: {{ num }}</p>
<!-- 不推荐使用$store.state.num++这种方式修改数据 -->
<button @click="changeNum(-10)">num-10</button>
<button @click="changeNumAsync(-5)">异步修改num-5</button>
<p>姓名:{{ userName }}</p>
<p>年龄:{{ age }}</p>
<p>性别:{{ gender }}</p>
</div>
</template>
<script>
// 访问state数据的方式二
// 1 import {mapState} from 'vuex';引入辅助函数mapState
// 2 ...mapState(['num']), 将state里面的属性映射为当前组件的计算属性
// 触发 mutations 修改数据的方式二
// 1 import {mapState,mapMutations} from 'vuex'
// 2 methods中 ...mapMutations(['fn']) 将mutations里面的方法映射为当前组件的方法
// 触发 actions 异步修改数据的方式二
// 1 import {mapActions} from 'vuex'
// 2 methods中 ...mapActions(['fn']) 将actions里面的方法映射为当前组件的方法
// mapGetters 建立快捷访问的方式二
// 1 import {mapGetters} from 'vuex'
// 2 ...mapGetters(['userName', 'age', 'gender']),将getters里面的方法映射为当前组件的计算属性
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
computed: {
// 将state里面的属性映射为当前组件的计算属性
...mapState(['num']),
...mapGetters(['userName', 'age', 'gender']),
},
methods: {
// 将mutations里面的方法映射为当前组件的方法
...mapMutations(['changeNum']),
// 将actions里面的方法映射为当前组件的方法
...mapActions(['changeNumAsync']),
},
}
</script>
<style></style>
App.vue
<!--
* @Author: 孙大大
* @Date: 2022-03-05 10:28:04
* @LastEditTime: 2022-03-05 14:14:44
* @FilePath: \vuex_demo\src\App.vue
-->
<template>
<div>
<Add></Add>
<hr />
<Reduce></Reduce>
</div>
</template>
<script>
import Add from '@/components/Add'
import Reduce from '@/components/Reduce'
export default {
components: {
Add,
Reduce,
},
created() {
console.log(this.$store)
},
}
</script>
<style></style>
main.js
import Vue from 'vue'
import App from './App.vue'
import store from '@/store'
Vue.config.productionTip = false
new Vue({
store,
render: (h) => h(App),
}).$mount('#app')