vuex的基础知识点

1 安装与引用

  • 引用:npm install vuex --save
  • 安装:
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    

2 核心概念

  1. state:vuex的基本数据,用来存储变量,可以实现多个组件都可以访问在这个变量,通常将全局数据将保存在这里。
state: {
  counter:1000
},

//在组件中访问
computed:{
  count() {
    return this.$store.state.counter
  }
},
  1. geeter:从基本数据(state)派生的数据,相当于state的计算属性,有些时候我们需要从store中的state中返回特定的模板或者计算,这个时候我们就需要用到Getter
<template>
  <div id="app">{{print}}</div>
</template>

<script>

export default {
  data(){
    return {
      print: this.$store.getters.print
    }
  }
};
</script>

  1. mutation:提交更新数据的方法,必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数,提交载荷作为第二个参数。
// vue
<template>
  <div id="app">{{userinfo}}<button @click="setage">修改</button></div>
</template>

<script>
import { mapState, mapGetters, mapMutations } from "vuex";

export default {
  methods:{
    ...mapMutations(['changeAge']),
    setage(){
      this.changeAge([20])
    }
  },
  computed: {
    ...mapGetters({
      userinfo: "print"
    })
  }
};
</script>



// store/index/js
export default new Vuex.Store({
    state: {
        msg: 'hello world',
        name: 'rabbit',
        age: 18
    },
    getters: {
        print(state) {
            return `姓名:${state.name} 年龄:${state.age}`
        }
    },
    mutations: {
        changeAge(state, payload) {
            state.age = payload[0]
        }
    },
    actions: {

    },
    modules: {

    }
})

  1. action:和mutation的功能大致相同,不同之处在于 ==》1. Action 提交的是 mutation,而不是直接变更状态。 2. Action 可以包含任意异步操作。
export default new Vuex.Store({
    state: {
        msg: 'hello world',
        name: 'rabbit',
        age: 18
    },
    getters: {
        print(state) {
            return `姓名:${state.name} 年龄:${state.age}`
        }
    },
    mutations: {
        changeAge(state, payload) {
            state.age = payload[0]
        }
    },
    actions: {
        asychangeAge({ commit }, payload) {
            return new Promise((resolve, reject) => {
                setInterval(() => {
                    commit('changeAge', payload);
                    resolve();
                }, 3000)
            })
        }
    },
    modules: {

    }
})


<template>
  <div id="app">{{userinfo}}<button @click="setage">修改</button></div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  methods:{
    ...mapActions(['asychangeAge']),
    setage(){
      this.asychangeAge([18]).then(() => {
        console.log('修改完成')
      })
    }
  },
  computed: {
    ...mapGetters({
      userinfo: "print"
    })
  }
};
</script>

  1. modules:模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理。

export default new Vuex.Store({
  // ......
  modules: {
      moduleA: {
          namespaced: true,
          state: {
              name: 'moduleA'
          },
          getters: {},
          mutations: {
              changeName(state, payload) {
                  console.log(payload)
                  state.name = payload
              }
          },
          actions: {
              asychangeName({ commit }, payload) {
                  commit('changeName', payload);
              }
          }
      },
      moduleB: {
          namespaced: true,
          state: {
              name: 'moduleB'
          },
          getters: {},
          mutations: {
              changeName(state, payload) {
                  console.log(payload)
                  state.name = payload
              }
          },
          actions: {
              asychangeName({ commit }, payload) {
                  commit('changeName', payload);
              }
          }
      },
  }
})

<template>
  <div id="app">
    {{moduleA}}
    <br />
    {{moduleB}}
    <br />
    <button @click="setage">修改</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";

export default {
  methods: {
  	// 收集并重命名模块A中的Action
    ...mapActions("moduleA", {
      asychangeModuleA: "asychangeName"
    }),
  	// 收集并重命名模块B中的Action
    ...mapActions("moduleB", {
      asychangeModuleB: "asychangeName"
    }),
    setage() {
  	  // 修改模块A中的数据
      this.asychangeModuleA("This is the value of moduleA I modified").then(() => {
        console.log("修改moduleA成功");
      });
  	  // 修改模块B中的数据
      this.asychangeModuleB("This is the value of moduleB I modified").then(() => {
        console.log("修改moduleB成功");
      });
    }
  },
  computed: {
  	// 收集并重命名模块A中的State
    ...mapState("moduleA", {
      moduleA: state => state.name
    }),
  	// 收集并重命名模块B中的State
    ...mapState("moduleB", {
      moduleB: state => state.name
    })
  }
};
</script>

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圣京都

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值