vuex-store-5.0

本文深入解析了Vue.js的Vuex插件,详细介绍了其作为单一状态树的作用和实现方式,包括状态管理、mutations、actions、getters的使用,以及如何在组件中调用这些功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

                                     vuex-store解析

5.0------vuex共享 是插件 Single Source of Truth单一状态树–》单一数据源 即只推荐使用一个store

  1. store文件下 index.js
import Vue from 'vue'

import Vuex from 'vuex'


1.1.安装插件

  vue.use(Vuex)

1.2.创建对象

const store = new Vuex.Store({     

  state:{                                                                  Action ->Mutations(先进行修改) ->State(不要在这进行修改)

      counter:1000                                                Devtools插件 监控state的改变(只能监控同步操作,直接修改state是监控不了)

      student:[

        {name:'1',age:18},                                       

        {name:'3',age:22},

        {name:'2',age:30}

      ],

      info:{

          name:'cobe',

          age:33,

          hobby:hehe

      }

  },-----------------------------------------------

    mutations:{                         

        同步操作 

        // 定义方法  只要对state进行修改的内容 都在这里进行状态更新

      increment(state){                          在App.vue中用  this.$store.commit('increment') 获取

        state.counter++

      },

      decrement(state){                          在App.vue中用 this.$store.commit('decrement') 获取

        state.counter--

      },

      incrementCount(state,count){            在App.vue中  <button @click="addCount(5)">+5</button>

        state.counter += count                    addCount(count){  1.普通的提交封装

      }                                                                this.$store.commit(' incrementCount',count)

      ,                                                                }

        incrementCount2(state,payload){            在App.vue中  <button @click="addCount(5)">+5</button>

        state.counter += payload.count            addCount(count){    1.特殊的提交封装

      }                                                                        this.$store.commit({

                                                                                    type:'incrementCount2', count

                                                                                })

      ,                                                                    }

      updataInfo(state){

            state.info.name = 'coderwh'              响应式

          // state.info['address'] = '洛杉矶'            增加一个属性  没有响应式

          //  Vue.set(state.info,'address','洛杉矶')    增加一个属性  具有响应式

          //  delete state.info.age                          删除一个属性  没有响应式

          //  Vue.delete(state.info,'age')                删除一个属性  具有响应式

    }, 

      addStudent(state,stu){                          在App.vue中  <button @click="addstudent">添加学生</button>

      state.student.push(stu)                        addstudent(){  const stu ={name:'4'.age:20}

      }                                                                                  this.$store.commit('addStudent',stu)

    },                                                        },-----------------------------------------------

    actions:{  异步操作      类似于mutations  修改state内容时,要经过mutations  在App.vue中  this.$store.dispatch('aupdataInfo',参数)

        aUpdateInfo(context,payload(参数)){    context:上下文 相当于store           

          setTimeout(()=>{

              context.commit('updataInfo')

          },1000)

        },

        异步请求后 ,通知外界

  2.1    aupdateInfo(context,payload){    context:上下文 相当于store           

          setTimeout(()=>{                                                  在App.vue中  this.$store.dispatch('aupdataInfo',{

              context.commit('updataInfo')  里面提交完成                                      message:'携带的信息'

                console.log(payload.message)                                                        success:()=>{      console.log('里面已完成')

                payload.success()  回调                                                                    }

          },1000)                                                                                          })   

        }, 

2.2    aupdateInfo(context,payload){    context:上下文 相当于store

            return new Promise((reslove,reject)={                    在App.vue中  this.$store.dispatch('aupdataInfo',‘携带的信息')

              setTimeout(()=>{                                                                          .then(res=>{

                context.commit('updataInfo')    里面提交完成                              console.log('里面完成了提交')

                console.log(payload)                                                                  console.log(res)      打印  hahah

                reslove('hahah')  向外界传入参数                                                })             

          },1000)     

        })                                                                                       

      },                                                                                                           

    },,-----------------------------------------------                                                                                                             

    getters:{

    类似于计算属性 进行操作但不对state进行修改  eg:filter 过滤器

    powerCounter(state){                      在App.vue中      <h2>{{$store.getters.powerCounter}}<h2>

      return state.counter * state.counter

    },

    more20stu2(state){                          在App.vue中  <h2>{{$store.getters.more20stu2}}<h2>

      return state.students.filter(s=>s.age >20) 

    },

    more20stu2Length(state,getters){    在App.vue中  <h2>{{$store.getters.more20stu2Length}}<h2>

      return getters.more20stu2.length

  },

  moreAgeStu(state){                            在App.vue中  <h2>{{$store.getters.moreAgeStu(18)}}<h2>  传入一个参数

    return function(age){

      return state.student.filter(s=>s.age>age)

    }

  }

  },-----------------------------------------------

    module:{                                      const moduleA={                                    在App.vue中  <h2>{{$store.state.a.name}}<h2>                     

        划分专门模块 进行保存                  state:{  name:'zhangsan'},

      a:moduleA                                    mutations:{                                        在App.vue中    <button @click="updateName">修改名字</button>

    }                                                            updateName(state,payLoad){                  updateName(){  this.$store.commit(' updateName','lisi') }

                                                                    state.name = payLoad

                                                                  }

                                                                },

                                                            actions:{

                                                                aUpdateName(context){            这里的    context是本模块   

                                                                }                                              如果想调用根模块就调用  context.rootGetters

                                                            },

                                                            getters:{                                             

                                                                  fullname(state){                            在App.vue中  <h2>{{$store.getters.fullname}}<h2>   

                                                                      return state.name + 'hahhah'

                                                                  },

                                                                  fullname2(state,getters){                在App.vue中  <h2>{{$store.getters.fullname2}}<h2>   

                                                                      return getters.fullname + 'hahhah2'

                                                                  },

                                                                  引用大模块中state的数据-----

                                                                  fullname3(state,getters,rootstate){    在App.vue中  <h2>{{$store.getters.fullname3}}<h2>   

                                                                      return getters.fullname + rootstate.counter

                                                                  }

                                                              }

})                                                             

default export store  -----------------------------------------------

2.在main.js中 添加

import store from './store'

new Vue({

  el:'#app',

  store,            添加这行

  render:h =>h(App)

})

3.在App.vue 中 -----------------------------------------------

3.1

    <h2>{{$store.state.counter}}<h2>

    <button @click="$store.state.counter++">+</button>

    <button @click="$store.state.counter++">-</button>

</template>

3.2  <template>

    <h2>{{$store.state.counter++}}<h2>

    <button @click="additon">+</button>

    <button @click="subtraction">-</button>

    <h2>{{$store.getters.powerCounter}}<h2>

    <h2>{{more20stu}}<h2>

</template>

<script>

  export default{

    computed:{

      more20stu(){

        return this.$store.state.students.filter(s=>{

          return s.age >= 20

      })

    }

  },

    methods:{

      additon(){

        this.$store.commit('increment')

      },

      subtraction(){

        this.$store.commit('decrement')

      },

    }

  }

</script>

5.x-----------es6语法 对象结构

const obj = {

  name:'why',

  age:18,

  height:1.9

}

const {name,height,age} =obj; 顺序可以调换

console.log(obj.name) =>why console.log(obj.age) =>18 console.log(obj.height) =>1.9

例子:局部状态通过context.state 暴露出来,根节点状态则为context.rootState 在上述module中有描述

const moduleA = {

actions:{

hahaha({state,commit,rootState})

    console.log(rootState)    打印出来的是根节点对应的内容

},

getters:{

hahaha({state,commit,rootState})

  return state.count + rootState.count    即本状态下的count 加上 根节点上 count

    console.log(rootState)    打印出来的是根节点对应的内容

}

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值