vue-x 笔记1

名字不重要, 为什么要用这个? 解决什么问题? 他是怎么解决这个问题的? 什么设计? 什么思想?

为什么用vue-x? 怎么用vue-x?

当我们碰到一个新的工具或框架时,

首先我们要知道这是干什么,解决了什么问题第二我们要知道怎么用这个工具, 第三,我们要知道这个工具具体都干了什么第四,我们要知道这个工具出于什么思想,以什么样的方式解决了问题.

回到正题

vue组件是个树形结构现在我想实现 BB 和 CC之间的传递要怎么做?

父子间组件可以用 props 和自定义事件, 可以传递信息, 所以BB和CC需要找到公共父组件,逐级上传,逐级下传.

所以vue-x 是用来解决组件之间的通信的?

具体步骤

1.安装依赖包

$ cnpm install vuex --save

引入

import Vuex from "vuex"

3.激活? 注册? 所有vue插件都需要这个,router也是

Vue.use(Vuex);

4.配置项

// 我们发现 只需要在根实例上, 引入store,
// 所依赖的所有组件都会自动添加 $store属性
// 所有组件都共享的一个数据空间?
export default new Vuex.Store({
  state : {// 类似组件中的 date?
 msg : "我是state"
  },
// 这里是主要储存数据的地方
// $store.state.msg 或者 this.$store.state.msg 可以在任何组件获取数据.
  mutations : {// 定义方法 ,类似methods?
 //payload
 setVal (state,val) {
   state.val = val;
// 定义的时候,state必须要留出来, 这里不像组件可以用this.state.
 }
// 这里跟methods稍微不同,主要是针对修改 state 中的数据的.
// 换言之,在各个组件中, 不可以用$store.state.msg = "sga"的方式修改数据
// 不过不知道, v-model="$store.state.msg ",这种双向绑定能不能更改,
//视频课上说不行, 我自己试的时候似乎是可以的.
//$store.commit("setVal","everyone");
// 这里要注意,setVal 是 选择要调用 哪个函数
// "everyone" 对应的是 val,
// state 实际上是不用传的, 默认传的.
  }
})

vuex 和普通组件其实还是比较相似的. 但老实说这不是组件, 确实跟组件不同,这里没有html,没有样式, 主要就是用来存放数据的. 然后留出各个接口让各个组件可以改查

主要的用处就是,非父子之间的数据共享?数据通信?

联想设计模式课里陈老师说的, 如果这不算是个模块,组件,而就是个数据块, 组件跟这个数据块产生的联系不算是增加耦合度, 那么这应该就是依赖倒置原则的应用体现了吧?

看到网上说, vue-x 主要是状态的共享,, 我们看字段, 也是 state 是不是可以理解为, 跟组件本身相关的数据,最好还是放在组件内部的data里或者组件跟组件的依赖,最好是限于一些状态?

状态这种数据概念,理解程度似乎不够啊.

"Hello World, Hello Blog"

CATALOG

FEATURED TAGS

FRIENDS