【Vue学习笔记】Vuex使用

vuex是干嘛的

Vuex是用来进行公共数据方法管理的。即管理所有数据都能拿到的数据和方法

vuex的核心

• state

  1. 用于存储公共状态，也就是数据，可以理解为组件中的data，以对象的格式写入即可
     state: {counter: 10}

  2. 在任何组件中都可以用$store.state.counter来获取。但是尤大大只建议用此方法来获取，如果要想更改数据则必须通过mutations来进行操作，因为这样可以配合devtools插件来监听数据变化来自那个方法，利于排错

• mutations

  1. Mutation方法介绍: 用于存储公共方法，可以理解为组件中的methods,如果想要获取state里面的数据则只需在方法里面传个state参数即可实现，并通过state.counter直接调用即可
  2. Mutation方法使用: 一般都是先在组件中执行一个methods方法，然后在方法中再提交调用公共方法。this.$store.commit('方法名')//不需要加括号
  3. Mutation方法传参：mutations里的方法允许提交时被传参，this.$store.commi('addstus',stu)//stu便是参数，之后直接在mutations方法形参中加入这个stu即可，这个参数被称为是mutation的载荷(Payload)
  4. Mutation的提交风格：上面通过commit进行提交是一种普通的方式，还有第二种提交方式，包含type属性的对象,type中填写提交的方法名，下面则是写要传的值这种处理方式是将commit作为对象传过去，所以可将palyload作为对象传过去然后调用键名即可
  5. Mutation的响应规则: 如果我们想要公共状态的更新是响应式的就必须遵守一些规则
     • 只能修改已经在store初始化好的属性，因为响应式的原理是将存在的数据放在响应式库中
     • 给state中的数组添加新数据时要用push方法 state.stus.push(palyload.stu)
     • 或者赋值一个新的对象
     • 给state中的数组更改数据时只能用Vue.set方法
       Vue.set(state.stus,0,'老铁我好像变了')
     • 删除state中数组的数据则推荐用delete或者Vue.delete
       Vue.delete( state.stus[0])
  6. Mutation命名抽取: 如果方法太多可以用常量代替方法名
     做法: 在store文件夹中创建mutation-types.js文件，然后在里面定义其中的常量
     export counst STUS = 'stus'
     然后在使用的地方以对象的方式引入

• getters

  1. 用于存储计算方法，相当于组件中的计算属性写入格式也是一样，并且也可以传state参数
  2. 和平常计算属性一样，也需要return出去，引用的时侯通过$store.getters.方法名//不需要单独加引号括号
  3. getters中的方法还可以传入getters属性，并且可以直接在方法中调用使用`return getters.方法名.length

• Action

  1. Action是专门用来触发异步操作的，尤大大强调过异步操作绝对不可以在Mutations中使用，因为这样devtools是检测不到数据变化的，难以调试。
  2. Action的用法: 用法跟Mutation大体一致，但函数中参入的是context：跟store具有相同方法和属性的对象。我们可以用它去做提交操作，也可以获取context.state。
  3. 使用Action时，应该是先通过dispatch调用action的方法this.$store.dispatch('increment')这里dispatch中出方法外只能再传一个参数，如果想传多个值的话可以把一个对象传过去。在Action执行完后若想继续执行方法可在action方法中调用mutation方法

• module

  1. Module是为了避免状态太多难以维护而出现的，可以理解为模块化
  2. 首先定义一个对象在里面放四个核心属性，module除外，然后在modules里面注册: a:moduleA，一个模块的基本结构就写好了。
  3. state：用法一样，只不过在编译时会默认把模块加入state中，this.$store.state.a即可获取a模块的状态
  4. mutations: 用法完全一样，不过要注意重名问题，参数是(state,值...)
  5. getters: 用法依然一样，也要注意重名问题，参数分别是(state,getters,rootState)
  6. actions: 用法一样也是dispatch来调用，默认的参数是(context,值)context里面有commit,dispathc,getters,rootGetters,rootState,state这些参数，带root的是根的属性

devtools插件d

• Vue官方发布的一个浏览器插件，用来监听Vue数据的变化等，也可以监听数据变化来自那个方法

其他

• 对象解构： 如果想把对象中的属性拿出来使用可以用ES6语法中的对象解构const obj = {name: 'why',age：18}此时还不能单独使用，const {name,age} = obj 这样就可以单独使用了