第五章-vuex

最新推荐文章于 2024-09-21 11:34:18 发布

浪漫攻城狮莉小妖

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量232

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_43527345/article/details/122164754

版权

第五章-vuex

1、vuex解释

是什么：专门在Vue中实现集中式状态（数据）管理的一个Vue插件。多个组件的共享状态进行集中式管理,组件间通信方式，任意组件间通信

全局总线

vuex

请添加图片描述

什么时候用：

多个组件依赖于同一状态
来自不同组件的行为需要变更同一状态

2、Vuex原理

npm i vuex
Vue.use(Vuex)
store
vc ==> store

3、Vuex使用

main.js

// 引入vue
import Vue from 'vue'
import App from './App.vue'
import {mixin} from "@/mixin";
import VueResource from 'vue-resource'
import store from './store'
Vue.config.productionTip = false;
Vue.mixin(mixin)

// const Demo=Vue.extend({})
// const d = new Demo
// Vue.prototype.x= d
// 使用插件
Vue.use(VueResource)


new Vue({
    el: '#app',
    render: h=>h(App),
    store: store,
    beforeCreate() {
        Vue.prototype.$bus = this // 安装全局事件总线
    }
})

创建store文件夹，下由index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备actions---校园组件中的动作
const actions={
    increment(context,value){
        // console.log("actions",context,value)
        context.commit('INCREMENT',value)
    },
    // decrement(context,value){
    //     // console.log("actions",context,value)
    //     context.commit('DECREMENT',value)
    // }
}
// 准备mutations-用于操作数据state
const mutations={
    INCREMENT(state,value){
        // console.log("mutations",state,value)
        state.sum += value
        console.log(state.sum)
    },
    DECREMENT(state,value){
        // console.log("mutations",state,value)
        state.sum -= value
        console.log(state.sum)
    }
}
// 准备state--用于存储数据
const state={
    sum:0 //当前的和
}
// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

student.vue

<template>
  <div>
    <p>当前求和为:{{$store.state.sum}}</p>
<!--    强制转换为Number-->
    <select v-model.number="n">
<!--      得到的是字符串-->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>

  </div>
</template>
<script>
// import {mixin} from '../mixin'

export default {
  name:'Student',
  data(){
    console.log(this)
    return{
      sum: 0, //当前和
      n: 1, //用户选择数字
    }
  },
  methods:{
    increment(){
      this.$store.dispatch('increment',this.n)
    },
    decrement(){
      this.$store.commit('DECREMENT',this.n)
    },
    incrementOdd(){
      // eslint-disable-next-line no-empty
      if(this.sum % 2){

      }
    },
    incrementWait(){
      setTimeout(()=>{
      },500)
    },

  }
  // mixins:[mixin]
}
</script>

4、getters使用

当state中的数据需要经过加功后再使用时，可以使用getters进行加工

在store.js中配置

const getters = {
    bigSum(state){
        return state.sum*10
    }
}
// 创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

5、map方法的使用

mapState 映射state中的数据为计算属性

import {mapState} from ‘vuex’

借助mapState生成计算属性，从 state中读取数据。（对象写法,数组写法（对象属性名和返回值相同））

…mapState({})

…mapState([])

mapGetters 映射getters中的数据为计算属性

…mapGetters([])

mapActions 用于帮助我们生成actions对话的方法包含$store.dispatch(xxx)的函数
mapMutations 生成与mutations对话的方法及包含$store.commit(xxx)的函数

<template>
  <div>
    <p>当前求和为:{{$store.state.sum}}</p>
    <p>当前求和放大10倍为:{{$store.getters.bigSum}}</p>
<!--    强制转换为Number-->
    <select v-model.number="n">
<!--      得到的是字符串-->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="INCREMENT(n)">+</button>
    <button @click="DECREMENT(n)">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>

  </div>
</template>
<script>
// import {mixin} from '../mixin'
import {mapMutations} from 'vuex'
export default {
  name:'Student',
  data(){
    console.log(this)
    return{
      sum: 0, //当前和
      n: 1, //用户选择数字
    }
  },
  methods:{
    // increment(){
    //   this.$store.dispatch('increment',this.n)
    // },
    // decrement(){
    //   this.$store.commit('DECREMENT',this.n)
    // },
    incrementOdd(){
      // eslint-disable-next-line no-empty
      if(this.sum % 2){

      }
    },
    incrementWait(){
      setTimeout(()=>{
      },500)
    },
    // 生成对应的方法,方法中调用commit联系mutations
    // ...mapMutations({'increment':'INCREMENT',decrement:'DECREMENT'})
    ...mapMutations(['INCREMENT','DECREMENT'])
  },
  computed:{

  }
  // mixins:[mixin]
}
</script>

6、多组件共享数据

直接在store.js中取方法或者数据

7、vuex模块化+namespace

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const countOptions={
    // 命名空间
    namespaced: true,
    // 准备actions---校园组件中的动作
    actions:{
        increment(context,value){
            // console.log("actions",context,value)
            context.commit('INCREMENT',value)
        },
        decrement(context,value){
            // console.log("actions",context,value)
            context.commit('DECREMENT',value)
        }
    },
// 准备mutations-用于操作数据state
    mutations:{
        INCREMENT(state,value){
            // console.log("mutations",state,value)
            state.sum += value
            console.log(state.sum)
        },
        DECREMENT(state,value){
            // console.log("mutations",state,value)
            state.sum -= value
            console.log(state.sum)
        }
    },
// 准备state--用于存储数据
    state:{
        sum:0, //当前的和
        name:'重邮11',
        address:'重庆1',
        age:18,
    },
    getters : {
        bigSum(state){
            return state.sum*10
        }
    }
}
// 创建并暴露store
export default new Vuex.Store({
    modules:{
        a:countOptions
    }
})

Student

<template>
  <div>
    <p>当前求和为:{{$store.state.a.sum}}</p>
    <p>当前求和放大10倍为:{{bigSum($store.state.a)}}</p>
    <p>学生姓名是:{{$store.state.a.name}}</p>
<!--    强制转换为Number-->
    <select v-model.number="n">
<!--      得到的是字符串-->
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="INCREMENT(n)">+</button>
    <button @click="DECREMENT(n)">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>


  </div>
</template>
<script>
// import {mixin} from '../mixin'
import {mapMutations} from 'vuex'
import {mapGetters} from 'vuex'
// import {mapState} from 'vuex'
export default {
  name:'Student',
  data(){
    console.log(this)
    return{
      // sum: 0, //当前和
      n: 1, //用户选择数字
    }
  },
  methods:{
    // increment(){
    //   this.$store.dispatch('increment',this.n)
    // },
    // eslint-disable-next-line vue/no-dupe-keys

    // decrement(){
    //   this.$store.commit('DECREMENT',this.n)
    // },
    incrementOdd(){
      // eslint-disable-next-line no-empty
      if(this.sum % 2){

      }
    },
    incrementWait(){
      setTimeout(()=>{
      },500)
    },
    // 生成对应的方法,方法中调用commit联系mutations
    // ...mapMutations({'increment':'INCREMENT',decrement:'DECREMENT'})
    ...mapMutations('a',['INCREMENT','DECREMENT']),
    ...mapGetters('a',['bigSum']),
    // ...mapState({sum:'sum'})

  }
  // mixins:[mixin]
}
</script>

f(this.sum % 2){

  }
},
incrementWait(){
  setTimeout(()=>{
  },500)
},
// 生成对应的方法,方法中调用commit联系mutations
// ...mapMutations({'increment':'INCREMENT',decrement:'DECREMENT'})
...mapMutations('a',['INCREMENT','DECREMENT']),
...mapGetters('a',['bigSum']),
// ...mapState({sum:'sum'})

}
// mixins:[mixin]
}