最简单的vue状态管理vuex示例

一、vuex定义

vuex是一个转为Vue.js应用程序开发的状态管理库

 vuex可以在多个组件之间共享数据，并且共享的数据是响应式的，既数据的变更能及时渲染到模板上 

vuex采用集中式存储管理所有组件的状态

二、vuex核心概念

• state：状态对象，集中定义各个组件共享的数据
• mutations：类似于一个事件，用于修改共享数据，要求必须式同步函数
• actions：类似于mutations，可以包含异步操作，通过调用mutation来改变共享数据

三、安装vuex依赖 

npm install vuex --save

四、创建store文件夹，并创建index.js文件

在state中定义一个name属性为游客

在main.js中引用状态管理

在App.vue中渲染出这个属性

五、使用mutations属性

在mutations定义一个setName，用于登陆时把游客变为用户名称

在App.vue使用按钮模拟调用mutations中的setName函数，从而改变state中name的值。

其中commit函数第一个参数是函数名称setName，第二个参数是要求改的参数name

未点击按钮之前

点击之后

六、源代码

最简单的vue状态管理vuex示例：https://gitee.com/zyGitee983/learning-notes.git