vuex是什么?Vuex的用法 |
您所在的位置:网站首页 › vuex有哪些属性,使用场景是什么 › vuex是什么?Vuex的用法 |
vuex是什么东西? 官网对Vuex的定义,"Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。" 接下来,"它采用集中式存储,管理vue应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。" 我们说,一切工具都是为了需求服务的。 现在看来,这个vuex就是为管理"状态"而服务的。 你把门打开,门的状态从关转换为开; 你把开关从横转到竖,开关的状态从横向转换为纵向; 你从左到右拖动网页上的按钮,它的位置坐标x发生了变化。 这些变化的就是状态,就是此物现在是什么样。开的?关的?横的?竖的? 状态的改变,是因为我们的行为改变了它的外观。 反过来说,也是事物的表现层对我们的action做出了反馈。 即,改变了事物的状态,就是改变了事物的外观(表现层,view)。 引申开去的讲,前端所有会引起变化的,例如,click,drap,load,ajax,show,hide等等,都会引起变化,同时,它们也都是“状态”,而vuex要管理的,也就是它们所引起的变化。 以上这些关于vue状态的描述,都是我个人主观的理解。 关于"状态"的描述,未必完全正确,但我认为大方向应该没有错。 刚才说了,可以暂且把vuex的状态管理当成一个全局变量来看待。 但现在我们要说一下它和全局变量的区别: 1,vuex中存储的state是响应式的。 每当store中的state变化,那么components的view也相应的会得到update; 2,改变store中的state的唯一方法,就是commit mutations,提交变化。 Vuex使用store对象来保存和管理整个应用的状态, 在store里包含以下对象, -- state – 存放状态 -- getters – state的计算属性 (是不是感觉很像redux中的reducers?) -- mutations – 更改状态的逻辑,同步操作 (是不是感觉有点像redux中的subscribe?) -- actions – 提交mutation,异步操作 (会不会感觉有点像 redux当中 的dispatch({type.xxx})? ) -- mudules – 将store模块化 因为vue应用是模块化的开发,所以组件的状态在state中的保存方式, 必然也是按对应的模块的结构来保存的。 官方的说法: state,驱动应用的数据源;(所有状态保存在这) view,以声明方式将state映射到视图;(改变状态引发表现层变化) actions,响应在view上的用户输入导致的状态变化。(事件改变状态) 现在可以确定,Vuex的核心就是store[st?:(r)]对象。 因为是统一管理状态的,所以每个vue应用只能有一个store对象。 在它里面包含着此应用中的状态,state。 注意: 数据流都是单向的 组件能够调用 action action 用来派发 Mutation 只有 mutation 可以改变 state store 是响应式的,无论 state 什么时候更新,组件都将同步更新 这是一个最简章的vuex的结构:(它不能运行,因为它只是结构) const store = new Vuex.Store({ state: { // 存放状态 }, getters: { // state的计算属性 // 用来从 store 获取 Vue 组件数据 }, mutations: { // 更改state中状态的逻辑,同步操作 }, actions: { // 提交mutation,异步操作 // 可以给组件使用的函数 }, modules: { a: moduleA, b: moduleB, // ... } }); |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |