store数据仓库

项目搭建

npm init vite-app GxShujuku
cd GxShujuku
npm i
npm i vue-router

npm i vuex // 这一句是这节课的关键

新建store

①配置store
src文件下 store=》index.js
import { createStore } from 'vuex'

const store = createStore({}) //创建状态管理库

export default store; //对外抛出 store对象

②在main.js中挂载store

import router from './router/index.js'
import store from './store/index.js'
//将配置好的store对象与当前vue项目相关联
createApp(App).use(router).use(store).mount('#app')

状态管理库Vuex是一个专门为Vue.js应用程序开发的状态管理库
状态就是指组件之间共享的数据

一、vuex 获取数据的两种方式

Ⅰ、直接获取state数据

①Home.vue

<p>count:{{ getCount}}</p>

<p v-for="(item,i) in getUsers" :key="i">
{{item.name}}--{{item.age}}--{{item.score}}
</p>

<script>
export default {
name: "Home",
computed:{
getUsers(){
return this.$store.state.users;//这一句是重点
},
getCount(){
return this.$store.state.count;//这一句是重点
}
},
}
</script>

②store/index.js 文件

import {createStore} from 'vuex'
//创建状态管理库
const store = createStore({
// state:保存所有组件之间共享的数据
state:{
count:"666", // 获取count
users:[

{name:'李白',age:"50",score:85},
{name:'杜甫',age:"74",score:61},
{name:'白居易',age:"44",score:70},
]
}
})

//对外抛出 store对象
export default store;

Ⅱ、 对象展开运算符获取state数据

①Home.vue
<p>count:{{count}}</p>
<p v-for="(item,i) in users" :key="i">
{{item.name}}--{{item.age}}--{{item.score}}
</p>
</div>

</template>

<script>
import {mapState} from 'vuex'
export default {
name: "Home",
computed:{

// 对象展开运算符
...mapState(['count','users']) //这一句是重点
},
}
</script>

<style scoped>

</style>

二、获取getters:

①直接获取getters
<p>count:{{ count}}</p>-->
<p v-for="(item,i) in getAdults" :key="i"> //重点在这个getAdults上
{{item.name}}--{{item.age}}--{{item.score}}
</p>

<script>
export default {
name: "Home",
computed:{
//1、getters直接获取
getAdults(){ //重点在这一句
return this.$store.getters.adults;
}
},
}
</script>

②通过对象es6展开运算符 获取getters

<p>count:{{ count}}</p>
<p v-for="(item,i) in adults" :key="i"> //重点在这一句
{{item.name}}--{{item.age}}--{{item.score}}
</p>

<script>
import {mapState,mapGetters} from 'vuex'
export default {
name: "Home",
computed:{
...mapGetters(['adults']) //重点在这一句
},
}
</script>

三、子组件通过 mutations 修改state
①commit直接修改state
About.vue

<template>
<div> <h1> 我踏马莱拉</h1></div>
<p>count:{{count}}</p>
<p><button @click="change">修改count的数据</button></p>
</template>

import {mapState} from 'vuex'
export default {
name: "About",
computed:{
// 对象展开运算符
...mapState(['count']) //这一句是重点
},
methods:{
change(){
//在组件中触发 store中mutations的方法 change函数触发changeCount函数修改count
this.$store.commit('changeCount') //这一句是重点 调用函数
this.changeCount();
},

}
}

★ store中四个重要组成部分
我们使用comit触发mutations中定义的函数（修改state中同步数据）
使用dispatch触发actions中定义的函数（修改state中异步数据）

①第一个state
state:{
count:10,
users:[]
},

②第二个getters
//getters相当于store对象计算属性，主要对state的数据进行过滤
getters:{
adults(state){ // state指的就是所有 ①中的数据
return state.users.filter(function(item){
return item.age >=18;
})
}
}

③第三个mutations
mutations:{ //这玩意能修改state数据
changeCount(state){ // state:指的是store对象中的state
state.count=15;
},

④ 第四个dispath
直接使用this.$store.dispath('xxxxx','传递的参数')
使用对象展开运算符 ...mapActions(['xxx','xxx'])

〇完整版 store/index.js 文件

import {createStore} from 'vuex'
//创建状态管理库
const store = createStore({
// state:保存所有组件之间共享的数据
state:{
count:"666", // 获取count
user:{
id:1,
name:'李四',
age:999
},

users:[
{name:'庄淑娟',age:18,score:100,},
{name:'赵志冉',age:19,score:100},
{name:'李白',age:50,score:85},
{name:'杜甫',age:74,score:61},
{name:'白居易',age:44,score:70},
]
},
//相当于store对象计算属性，主要对state的数据进行过滤
getters:{
adults(state){ // state指的就是所有 ①中的数据
return state.users.filter(function(item){
return item.age >=20;
})
}

},
//mutations:定义了修改state数据的同步方法
mutations:{ //这玩意能修改state数据
changeCount(state){ // state:指的是store对象中的state
state.count=15;
},

changeUser(state,payload){ // 传一组值 payload进来
state.user.id = payload.id;
state.user.name = payload.name;
state.user.age = payload.age;

}
}
})

//对外抛出 store对象
export default store;

四、

要求: 项目实例子组件 About.vue 实现 store状态和管理器数据
①About.vue
<template>
<div> <h1> 我踏马莱拉</h1></div>
<p> {{user.id}}--{{user.name}}--{{user.age}}</p> //这一行是重点
</template>
<script>
import {mapState} from 'vuex' //这一行是重点
export default {
name: "About",
computed:{
// 对象展开运算符
...mapState(['user']) //这一句是重点
},
}
</script>
<style scoped>
</style>

②store/index.js

import {createStore} from 'vuex'
//创建状态管理库
const store = createStore({
// state:保存所有组件之间共享的数据
state:{
count:"666", // 获取count

user:{ //这一行是重点
id:1,
name:'李四',
age:999
},

users:[

{name:'李白',age:50,score:85},
{name:'杜甫',age:74,score:61},
{name:'白居易',age:44,score:70},
]
},
//相当于store对象计算属性，主要对state的数据进行过滤
getters:{
adults(state){ // state指的就是所有 ①中的数据
return state.users.filter(function(item){
return item.age >=20;
})
}

}
})
//对外抛出 store对象
export default store;