Vue全家桶之-----Vuex状态管理

vuex状态管理流程

vuex是Vue插件->状态管理->数据管理->

1.多个组件使用同一个数据
2.父传子
3子传父
4兄弟组件

vuex使用场景: 并不是所有的vue项目都适用于vuex项目,vuex使用场景只针对数据复杂的vue项目 vuex流程: 1.state->声明数据(组件可以用,响应式) 2.actions->和后台交互(ajax)->返回新结果 3.mutations->修改state,接收actions传递的结果

vuex的使用(state)

1.运行

npm i vuex from 'vuex'

2.导入Vuex

import Vuex from 'vuex'

3.安装Vue

Vue.use(Vuex)

4.创建store公共状态对象

const store = new Vuex.Store({
	state: { // state 中存放的，就是全局共享的数据，可以把 state 认为 是组件中的 data
    	count: 0
    }
})

5.将创建的store挂载到vm实例上

new Vue({
  el: '#app',
  render: c => c(app),
  router,
  store  // 5. 将 创建的共享状态对象，挂载到 Vue 实例中，这样，所有的组件，就可以直接从 store 中获取 全局的数据了
})

6.如果想要在组件中访问全局的数据：

this.$store.state.全局数据名称(假设为count)

vuex-state(声明数据)

使用:

1.视图中

{{this.$store.state.count}}

2.js->store的count对应的组件的计算属性(使用辅助函数mapState)

1)基础用法:
computed:{
    count(){
        return this.$store.state.count
    }
}
2)使用mapState
先使用按需导入
import {mapState} from 'vuex'
computed:mapState({
    count:state=>state.count,
    //等价于
    count(state){
        return state.count
    }
    //等价于count:function(state){return state.count}
    count:'count'
    //等价于
    countNew:'count
    //计算属性可以同时依赖state状态数据和自己的属性'
    count(state){
        return state.count+this.a
    }
})

其他使用:创建一个computed属性，通过mapState，结合 ... 展开运算符，把需要的状态映射到组件的计算属性中：

computed: {
    // 自定义的计算属性
    newMsg: function() {
      return "----" + this.msg + "------";
    },
    // 通过 展开运算符，把 state中的数据映射为计算属性，这样，能够让自己的计算属性和store中的属性并存
    ...mapState(["count"])
  }

基础-vuex-mapState

目的:简化state的使用

computed:{
    ...mapState['count']
}

视图中{{count}}

vuex-getters

组件中,计算属性:当data复杂时,把data改写成计算属性 当state比较复杂时,应该把复杂数据改写为getters数据

getters不是Vuex的核心组成部分

场景:如果state中的数据依赖了数据a,此时b就是getters的数据

getters:{
    msgNew(state){
        return state.msg+'xyz'
    }
}

使用:

<p> {{$.store.getters.msgNew}} </p>

注意:getters里面的数据msgNew对应的组件的计算属性

mapGetters

computed:{
    ...mapGetters(['msgNew'])
    ...mapState(['count'])
}

这里mapGetters的使用类比mapState的使用方法

Vuex的使用(mutations)

mutations:修改状态的数据

mutations{
    fn1(state){
        state.count++
    }
}

mutations中声明了一个方法,这里写一个按钮对其进行使用

<button @click="fn11"></button>
...
mutations:{
    fn1(state,payload){
        consloe.log(payload)
        state.count=payload.num
    }
}

组件的methods方法:

methods:{
    fn11(){
        //调用mutations中的fn1
        this.$store.commit('fn1',{num:200})
    }
}

mutations中的方法触发的条件必须是通过commit()提交方法

mapMutations

methods:{
//在methods中有一个方法fn1,值是mutation中的方法
    ...mapMutations(['fn'])
}

mutations中的方法里面的代码只能是同步的->如果是异步方法->actions

Vuex的使用(actions)

actions方法,异步

mutations:{
   setNum(state,payload){
   //num初始值是100,后台返回的200
    state.num=payload
}
...
actions:{
    fnac1(context){
    //context是仓库
        setTimeout(()=>{
           const numNew=200
           //在异步有结果的位置,把结果提交给mutations方法
           context.commit('setNum',numNew)
        },1000)
    }
    
    //这里也是可以传参数的
    fnac1(context,payload){
    //context是仓库
        setTimeout(()=>{
           const numNew=200+payload
           //在异步有结果的位置,把结果提交给mutations方法
           context.commit('setNum',numNew)
        },1000)
    }
}

调用:
methods:{
    fn2(){
        //触发actions中的方法fnac1
        this.$store.dispatch('fnac1')
    }
}
//此时在methods方法中只是定义,如果想让他在页面上展示,还需要渲染一下这个函数,为了方便展示,这里使用一个计算属性

mapActions

//结果:在methods中有一个方法fnac1,值是actions中的方法
methods:{
    ...mapActions(['fnac1'])
}
注意:这里的fnac1可以使用this在其他地方调用,因为使用mapActions中会隐式的创建一个同名方法

Vuex总结

管理流程 state:声明数据(响应式)->组件的计算属性 最终写法:

computed:{
    ...mapState(['count'])
}

mutation:修改状态的方法->组件的methods 需要在mutations中先声明好方法:

mutations:{
    fn1(){
        ...
    }
}

methods:{
    ...mapMutation(['fn1'])
}

actions:异步操作换取新数据->通过commit的方法把心数据交给mutations->组件中的methods 需要在actions中声明方法:

actions:{
    fnac1(context){
        ...
    }
}

methods:{
    ...mapActions(['fnac1'])
}