简单理解vuex

图解vuex

组件中的代码示例

//组件中的代码
<template>
    <h1>这是PHP学习视频</h1>
    <h2>使用store仓库的全局内容</h2>
    <!--展现store仓库状态值-->
    <h3>{{$store.state.list.goods_name}}-----{{$store.state.list.price}}</h3>
    <h2>修改store仓库的值</h2>
    <input type="number" v-model="num" >
    <button @click="jia()">+</button>
    <button @click="jian()">-</button>
    <br>
    <h2>修改store仓库的值在html中调用</h2>
    <button @click="$store.getters.jiang(num)">-2</button>
</template>
<script>
    export default {
        name: "Videophp",
        data(){
            return{
                num:1,
            }
        },
        methods:{
            jia(){
                //官方要求
                //通过 store.dispatch->action 在action中到后端异步获取数据->commit()->mutations去修改 state
                //dispatch() 的第一个参数是store 中的action中的方法名; 第二个参数才是我们要传的值
                this.$store.dispatch("adda",this.num)
            },
            jian(){
                //通常使用1
                // 可以直接修改state的值
                // this.$store.state.list.price -= this.num;
                //通常使用2 通过commit()修改
                //commit()的第一个参数是store中mutation的方法名,第二个参数才是我们要传的值
                //this.$store.commit('jianm',this.num);
                //通常使用3 在getters 中的方法修改
                this.$store.getters.jian_g(this.num)
                this.$store.getters.jiang(this.num)
            }
        }
    }
</script>
<style scoped>
</style>

vuex 数据仓中的代码示例

import { createStore } from 'vuex'
export default createStore({
  state: {
    list:{goods_name:'PHP从入门到放弃',price:10}
  },
  getters:{
    //es6 写法
    jian_g:(state)=>{
      //组件中传递的参数 在匿名函数 中接收
      return  (param)=>{state.list.price -= param}
    },
    jiang(state){
      //组件中传递的参数 在匿名函数 中接收
      return function(param){
         state.list.price -=param;
      } }  },
  mutations: {
    //state状态
    //param 是我们在组件中传递的参数 或者action内方法中传递的参数
    addm(state,param){
      //修改state的值
      state.list.price += param
    },
    jianm(state,param){
      state.list.price -= param
    }
  },
  actions: {
    //{state, getter, commit} 解构上下文 context 固定写法
    //param 是我们在组件中传递的参数
    adda({state, getter, commit},param){
      //用setTimeOut 模拟从后端异步获取数据
      setTimeout(()=>{
        //commit()第一个参数是上面mutations中的方法名,
        commit('addm',param);
      },3000)
    }
  },
  modules: {
  }
})

组件中的代码示例

vuex 数据仓中的代码示例

更多相关文章

随机推荐