09vuex

state

大白话：获取state的值

vuex中state数据是响应式的。只要state中数据发生变化。vue组件自动更新。

要想做到响应式

  前提：是在mutaion中定义函数修改state值。

1. 最好提前在你的 store 中初始化好所有所需属性。

2. 当需要在对象上添加新属性时，使用 Vue.set(obj, 'newProp', value)就是响应式

info: {
      name: 'kebe',
      age: 40,
      height: 1.98
    }

//下面
state.info.name='old-old-kebi' //修改已有的值还是响应式
state.info.address='beijing'//增加新的属性和值。该属性不是响应式。state.info确实增加了adderss属性。但是html试图不会发生变化。
state.info['id']=100 //不是响应式
Vue.set(state.info,'sex','男') //通过vue.set()增加属性和值就是响应式的

mapState

不管用不用mapState辅助函数，vue当前实例访问store.state数据都是在 cumputed计算属性内。

注意：进入到计算属性computed的属性。vue实例可以直接使用。同data数据一样。

mapState通过扩展运算符将store.state.属性 映射this.属性 this.指代当前vue实例对象。

//store.js
state: {
    count: 100,
    str: 'abc',
    student: [
      { name: 'zs', age: 10 }, 
      { name: 'lisi', age: 30 },
      { name: 'ww', age: 30 },
      { name: 'zq', age: 20 }
    ]
  },

没用mapState之前 **当前vue实例取store.state.属性** 数据是这样的
//computed
count(){
    return this.$store.state.count
},
str(){
        return this.$store.state.str
},
 student(){
            return this.$store.state.student
 },

import { mapState, mapMutations, mapGetters } from "vuex";
//方式1数组形式。这样当前vue实例上就有了count，str,student属性。值就是对应的值。
...mapState(['count','str','student']),
    
//方式2对象形式 不一定要同名  
 //不可以这样写 ...mapState({ count，str， student}),
  ...mapState({ count: "count", str: "str", student: "student" }),
    
//或者 `state => state.count` 等同于 上面的'count'
...mapState({ count: state => state.count, student: "student" }),

getters

大白话：获取state的值

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性computed）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

 

getters里面函数fn形参依次是（state,getters）最多只接受两个参数。

getters: {
    //getters里面的方法接收一个state参数，指向state，可直接调用state中的数据
    getMore20(state){
        //直接返回一个值
      return state.student.filter(element=>element.age>20)
    },
    //getters 也可以接受其他 getter 必须是作为第二个参数：
    getMore20Length(state,getters){
        //直接返回一个值
      return getters.getMore20.length
    },
     // 用户想传参就返回一个函数
    getMoreAge(state) {
        //返回一个函数。
      return age => state.student.filter(element => element.age > age)
    },
        
     getMoreAgeLen(state,getters){
         // return getters.getMoreAge.length
          return age=>state.student.filter(element=>element.age>age).length
     },
  }

不用mapgetters

computed: {
  getMore20() {
      return this.$store.getters.getMore20;
    },
    getMore20Length() {
      return this.$store.getters.getMore20Length;
    },
    getName() {
      return this.$store.getters.getName;
    },
    getMoreAge() {
      return this.$store.getters.getMoreAge;
    },
    getMoreAgeLen() {
      return this.$store.getters.getMoreAgeLen;
    },
}

 

use

import {mapGetters } from "vuex";

...mapGetters({
    getMore20:'getMore20',
    getMore20Length:'getMore20Length',
    getMoreAge:'getMoreAge',
    getMoreAgeLen:'getMoreAgeLen'
}),
//数组写法
...mapGetters(['getMore20','getMore20Length','getMoreAge','getMoreAgeLen',]),

<h4>{{getMore20}}h4>
<h4>{{getMore20Length}}h4>
<h3>{{getMoreAge(20)}}h3>
<h3>{{getMoreAgeLen(20)}}h3>

mutions

大白话：同步修改state的值  写在vue 实例methods里面

更改 Vuex 的 store 中的状态（值）的唯一方法是提交 mutation。

Vuex 中的 mutation 非常类似于事件 methods：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

add是事件类型。

一条重要的原则就是要记住 mutation 必须是同步函数

//store.js 在mutations中修改state

mutations: {
    add(state){
      state.count+=5
    },
    decrease(state){
      state.count-=5
    },
    // 提交载荷(接受其他参数),在大多数情况下,载荷是一个对象
    addNum(state,payload){
      state.count+=payload.num
    },
    decreaseNum(state,payload){
      state.count-=payload.num
    },
}

不用mapMutation。在methods里面通过this.$store.commit('xxx') 提交 mutation

 add(){
      this.$store.commit('add')
    },
    decrease(){
      this.$store.commit('decrease')
    },
        //注意：是在这里提交payload和mapMutation提交payload位置不同
    addNum(){
      this.$store.commit('addNum',{num:this.num}) //num是自己从data里面取出来的，
    },
    decreaseNum(){
      this.$store.commit('decreaseNum',{num:this.num})
    },

<button @click="add">addbutton>
<button @click="decrease">jianfabutton>
<button @click="addNum">addNumbutton>
<button @click="decreaseNum">decreaseNumbutton>

mapMutation

使用mapMutation 同样两种方式。优先选择对象方式。

//对象方式
...mapMutations({
    add:'add',
    decrease:'decrease',
    addNum:'addNum',
    decreaseNum:'decreaseNum'
})
//数组方式
...mapMutations(['add','decrease','addNum','decreaseNum'])

使用 注意payload是在html中传的。

<button @click="add">addbutton>
<button @click="decrease">jianfabutton>
<button @click="addNum({num:10})">addNumbutton> //留心payload
<button @click="decreaseNum({num:10})">decreaseNumbutton>