vue学习笔记 十二、通过计算属性获取定义的状态数据

系列导航
vue学习笔记 一、环境搭建	vue学习笔记 二、环境搭建+项目创建	vue学习笔记 三、文件和目录结构
vue学习笔记 四、定义组件(组件基本结构)	vue学习笔记 五、创建子组件实例	vue学习笔记 六、ref定义单个数据
vue学习笔记 七、方法的定义和使用	vue学习笔记 八、toRef的使用	vue学习笔记 九、父子组件实例-基本结构
vue学习笔记 十、状态管理基础结构	vue学习笔记 十一、计算属性介绍	vue学习笔记 十二、通过计算属性获取定义的状态数据
vue学习笔记 十三、路由介绍	vue学习笔记 十四、页面跳转	vue学习笔记 十五、组件挂载过程及query方式带参数的页面跳转
vue学习笔记 十六、params方式带参数的页面跳转	vue学习笔记 十七、父子组件 ---> 子组件传值	vue学习笔记 十八、父子组件相互传递参数
vue学习笔记 十九、实例完整代码

一、效果：

 

 

上面的数据是状态管理中定义的数据。

二、项目结构截图

 

三、代码

index.js

import { createStore } from 'vuex'

export default createStore({
  //定义所需要的状态
  state: {
	 list:[
		 {
		 	title:'吃饭',
		 	complete:false
		 },{
		 	title:'睡觉',
		 	complete:false
		 },{
		 	title:'敲代码',
		 	complete:true
		 },
	 ]
  },
  //同步修改state 都是方法
  //第一个参数state，第二个参数是需要修改的值
  mutations: {
	   //添加任务
	   addTodo(state,payload){
		   state.list.push(payload)
	   },
	   //删除任务 splice(下表,个数)
	   delTodo(state,payload){
		   state.list.splice(payload,1)
	   },
	   //清除已完成
	   clear(state,payload){
		   state.list = payload
	   }
  },
  //异步提交mutations
  //第一个参数是store 第二个参数是修改的值
  actions: {
	   
  },
  //模块化的
  modules: {
  }
})

Home.vue

<template>
	<div>{{list}}</div>
</template>

<script>
	//编写js内容
 
import {defineComponent,computed,ref} from 'vue'
import {useStore} from 'vuex'


export default defineComponent({
	name:'Home',
	components:{
	 
	},
	setup(){
		let store = useStore()
		//console.log(store)
		let list =computed(() =>{
			return store.state.list
		}) 
		return{
			 list 
		}
	}
})
	
	
</script>

<style scoped lang="scss">
</style>