vuex了解一下？

Vuex 使用 单一状态树 ，用一个对象就包含了全部的应用层级状态。作为一个“唯一数据源”而存在

getter

getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算（可以认为是 store 的计算属性）。

• 接受 state 作为第一个参数
• 接受其他 getter 作为第二个参数

mutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。每个 mutation都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler) 。

• mutation 必须是同步函数
• 接受 state 作为第一个参数
• mutation handler，需要以相应的 type 调用 store.commit 方法
• 在组件中使用 this.$store.commit('xxx'[, args1, args2...]) 提交 mutation

action

• 通过 store.dispatch 方法触发。
• Action 提交的是 mutation，而不是直接变更状态。
• Action 可以包含任意异步操作。
• 接受一个与 store 实例具有相同方法和属性的 context 对象，因此可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

使用vuex

安装模块

npm install vuex --save

// store.js
import Vue from 'vue'  
import Vuex from 'vuex'  

Vue.use(Vuex)
let store = new Vuex.Store({
    state:{
        count:100
    },
    getters:{
        filter(state){
            return state.count >= 120 ? 120 : state.count;
        }
    },
    mutaitons:{
        add(state,n,m){
            state.count= state.count + n + m;
        },
        de(state,payload){
            state.count-=payload.n;
        }
    },
    actions:{；
        add(context){
            setTimeout( ()=>{
                context.commit('add', {n:5} )
            }, 1000)
        }
    }
})

export default store
复制代码

读取state的属性

this.$store.state.count;  
复制代码

读取getters的属性

this.$store.getters.filter;  
复制代码

同步改变state

// 多个参数
this.$store.commit('add',5,3);   
// 对象参数
this.$store.commit('de',{
    n:5
});  
//名字、参数对象  
this.$store.commit({
    type:'de',
    de:5
});   
复制代码

异步改变state

this.$store.dispatch('add')  
复制代码

vuex辅助函数

mapState

mapGetters

mapMutations

mapActions

以上方法都接收一个参数，返回对象；

import {mapState,mapGetters,mapActions,mapMutations} from 'vuex'
    export default {
      computed: {
        ...mapGetters({
          num2: 'filterCount'
        }),
        ...mapState(['count']),
      },
      methods: {
        ...mapActions({
          addHandle: 'addAction'
        }),
        ...mapMutations({
          deHandle:'deIncrement'
        })
      }
}

/*
多种写法
computed: mapState({
    num: state => state.count,
    num: 'count',
    num(state) {
    return state.count+100
    },
    count: 'count'
}),
computed: mapState(['count']),
*/
复制代码

如需传参可以直接写在绑定事件上：

<input type="button" value="-" @click="deHandle({de:5})" />
复制代码

vuex模块

// 定义模块
let selectModule = {
  state:{
    title:'hello123',
    list: []
  },
  mutations:{
    changeTitle(state, payload){
      state.title = payload.title
    },
    changeList(state, list){
      state.list = list;
    }
  },
  actions:{
    getListAction({commit}){
      // 发送请求
      axios.get('http://easy-mock.com/mock/594f5d4b9adc231f3569be76/list/list')
        .then((data)=>{
          commit("changeList", data.data);  // 拿到数据后，提交mutations，改变状态
        })
        .catch((error)=>{
          conso.log(error)
        })
    }
  }
};

let store = new Vuex.Store({
    modules:{
      selectModule
    }
})
复制代码

state里的属性需要如下访问，其他的不变；

this.$store.state.selectModule.title  
this.$store.commit('changeTitle',5,3);  
this.$store.dispatch('getListAction',5,3);  
复制代码

vuex流程图

组件触发事件dispatch；

actions调用后端接口；

调用commit，来触发mutations；

改变state的状态；

最后渲染组件；

以下仅为笔记：

上下级组件之间改变状态

propertyName.sync

1.x版本上的:propertyName.sync传参到子组件，当子组件的属性值改变时，父组件也会变

2.0版本废除

2.3版本之后又恢复了sync；

所以使用:propertyName.sync，绑定属性时的属性值sync即可；

父组件：

<select-input :is-show.sync="listShow"></select-input>
<list v-show="listShow"></list>
复制代码

子组件：

<button @click="showListHandle"><button/>
<script>
export default {
  props:['isShow'],
  computed:{
    initShow(){
        return this.isShow
    }
  },
  methods: {
    showListHandle(){
        //触发更新，名字是is-show，值为initshow取反；
        this.$emit("update:isShow", !this.initShow)
    }
  }
}
</script>
复制代码

兄弟组件之间改变状态

需要使用父组件作为通道，父组件传入子组件自定义的事件，在子组件触发某个事件时，使用$emit来触发父组件传入的自定义事件，来改变兄弟组件的状态；

需求：

父组件的title值传入了select-input组件作为input的值；

list组件的列表项点击时需要改变title值；

以改变兄弟组件select-input的input值；

实现：

父组件传入list组件自定义事件changeTitle；

在list组件的列表项点击时，触发getTitleHandle事件处理函数，然后再来触发自定义事件changeTitle来改变父组件的title值；

父组件

<select-input :is-show.sync="listShow" :title="title"></select-input>
<list v-show="listShow" @changeTitle="titleHandle"></list>
<script>
exprot default{
    data(){
        return {
            listShow: flase;
            title:’’
        }
    },
    methods:{
        titleHeadle(title){
            this.title=title;
        }
    }
}
</script>
复制代码

select-input组件

<input @click="showListHandle" :value="this.props.title"/>
复制代码

list组件：

<template>
<ul class="list">
    <li v-for="item in data" @click="getTitleHandle(item.title)">{{item.title}}</li>
</ul>
</template>
<script>
exprot default{
    data(){},
    methods:{
        getTitleHandle(title){
            this.$emit('changeTitle',title)
        }
    }
}
</script>
复制代码