ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

store数据仓库

2022-05-12 00:32:29  阅读:252  来源: 互联网

标签:count name age 数据仓库 item state 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;

 

标签:count,name,age,数据仓库,item,state,store
来源: https://www.cnblogs.com/ran777/p/16260617.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有