博客列表 >简单理解vuex

简单理解vuex

中天行者
中天行者原创
2021年12月11日 00:12:50482浏览

图解vuex

组件中的代码示例

  1. //组件中的代码
  2. <template>
  3. <h1>这是PHP学习视频</h1>
  4. <h2>使用store仓库的全局内容</h2>
  5. <!--展现store仓库状态值-->
  6. <h3>{{$store.state.list.goods_name}}-----{{$store.state.list.price}}</h3>
  7. <h2>修改store仓库的值</h2>
  8. <input type="number" v-model="num" >
  9. <button @click="jia()">+</button>
  10. <button @click="jian()">-</button>
  11. <br>
  12. <h2>修改store仓库的值在html中调用</h2>
  13. <button @click="$store.getters.jiang(num)">-2</button>
  14. </template>
  15. <script>
  16. export default {
  17. name: "Videophp",
  18. data(){
  19. return{
  20. num:1,
  21. }
  22. },
  23. methods:{
  24. jia(){
  25. //官方要求
  26. //通过 store.dispatch->action 在action中到后端异步获取数据->commit()->mutations去修改 state
  27. //dispatch() 的第一个参数是store 中的action中的方法名; 第二个参数才是我们要传的值
  28. this.$store.dispatch("adda",this.num)
  29. },
  30. jian(){
  31. //通常使用1
  32. // 可以直接修改state的值
  33. // this.$store.state.list.price -= this.num;
  34. //通常使用2 通过commit()修改
  35. //commit()的第一个参数是store中mutation的方法名,第二个参数才是我们要传的值
  36. //this.$store.commit('jianm',this.num);
  37. //通常使用3 在getters 中的方法修改
  38. this.$store.getters.jian_g(this.num)
  39. this.$store.getters.jiang(this.num)
  40. }
  41. }
  42. }
  43. </script>
  44. <style scoped>
  45. </style>

vuex 数据仓中的代码示例

  1. import { createStore } from 'vuex'
  2. export default createStore({
  3. state: {
  4. list:{goods_name:'PHP从入门到放弃',price:10}
  5. },
  6. getters:{
  7. //es6 写法
  8. jian_g:(state)=>{
  9. //组件中传递的参数 在匿名函数 中接收
  10. return (param)=>{state.list.price -= param}
  11. },
  12. jiang(state){
  13. //组件中传递的参数 在匿名函数 中接收
  14. return function(param){
  15. state.list.price -=param;
  16. } } },
  17. mutations: {
  18. //state状态
  19. //param 是我们在组件中传递的参数 或者action内方法中传递的参数
  20. addm(state,param){
  21. //修改state的值
  22. state.list.price += param
  23. },
  24. jianm(state,param){
  25. state.list.price -= param
  26. }
  27. },
  28. actions: {
  29. //{state, getter, commit} 解构上下文 context 固定写法
  30. //param 是我们在组件中传递的参数
  31. adda({state, getter, commit},param){
  32. //用setTimeOut 模拟从后端异步获取数据
  33. setTimeout(()=>{
  34. //commit()第一个参数是上面mutations中的方法名,
  35. commit('addm',param);
  36. },3000)
  37. }
  38. },
  39. modules: {
  40. }
  41. })
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议