vue学习笔记 十、状态管理基础结构

一、状态的作用：

状态管理可以实现数据共享，定义的state任何组件都可以使用。

二、项目结构截图

 

三、代码

index.js 

基本结构代码：

import { createStore } from 'vuex'

export default createStore({
  //定义所需要的状态
  state: {
	 name:'jack' 
  },
  //同步修改state 都是方法
  //第一个参数state，第二个参数是需要修改的值
  mutations: {
	  setName(state,payload){
		  state.name = payload
	  }
  },
  //异步提交mutations
  //第一个参数是store 第二个参数是修改的值
  actions: {
	  asyncSetName(state,params){
		  setTimeout(()=>{
			   //commit是提交mutation 调用mutations的方法
			   store.commit('setName',params)
		  },2000)
	  }
  },
  //模块化的
  modules: {
  }
})

 

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){
		   setat.list.push(payload)
	   },
	   //删除任务 splice(下表,个数)
	   delTodo(state,payload){
		   setat.list.splice(payload,1)
	   },
	   //清除已完成
	   clear(state,payload){
		   setat.list = payload
	   }
  },
  //异步提交mutations
  //第一个参数是store 第二个参数是修改的值
  actions: {
	   
  },
  //模块化的
  modules: {
  }
})