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

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

一、状态的作用：

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

二、项目结构截图

 

三、代码

index.js 

基本结构代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

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 

为了完成父子组件实例而初步设计的结构代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

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: {   } })