一个前端,爱跑步、爱吉他、爱做饭、爱生活、爱编程、爱南芳姑娘,爱我所爱。世间最温暖又无价的是阳光、空气与爱,愿它们能带你去更远的地方。

  • 文章
  • 心情
  • 照片墙
  • 留言板
  • 工具
  • 友链
  • biaoblog

    专注web开发技术分享

    vuex的学习

    技术 150 2019-07-12 17:57

    一、接收state的方式有三种

    1.引入store直接 使用插值的方式 {{$store.state.count}}

    {{$store.state.count}}
    

    2.在computed中 声明一个方法 把$store.state.count return出来

    countTwo(){
    return this.$store.state.count;
    },
    

    3.通过mapState 在computed中进行引入 ...mapstate(["stateValue"])

    ...mapState(["count"]),
    

    二、引入getters

    1.引入store直接 直接在dom上绑定事件 @click="$store.commit('事件名称','参数')"

    <button @click="addAction(10)">增加</button>
    

    2.引入mapMutations 在methods中进行注册:...mapMutations(["add"]),如果有参数..只能在dom绑定方法时进行传递..

    //eg: <input @click="add(10)"/>
    ...mapMutations(["add","reduce"]),
    

    三、引入getters

    使用mapGetters的方法类似于state的引入 两种引入方法

    1.在computed中 声明方法 把this.$store.getters.count return出来

    count(){
    return this.$store.getters.count;
    }
    

    2.通过mapGetters 在computed中进行引入 ...mapGetters(["gettersValue"])

    ...mapGetters(["count"])
    

    四、调用仓库中action的方法跟mutations的方法相同 也是两种

    完整vue
    <template>
    <div>
    <h1>
    vueX的实践
    </h1>
    <input :type="change">
    <hr>
    <!-- state第一种 -->
    {{$store.state.count}}
    <!-- state第二种 -->
    {{countTwo}}
    <!-- state第三种 -->
    {{count}}
    <div>
    <!-- mutation第一种 -->
    <button @click="$store.commit('add',10)">增加</button>
    <!-- mutation第二种 -->
    <button @click="addAction(10)">增加</button>
    <button @click="reduceAction">减少</button>
    <!-- {{change}} -->
    </div>
    <button @click="toChange">改变type</button>
    </div>
    </template>
    <script>
    import store from '@/vuex/vuex'
    import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
    export default {
    data() {
    return {
    msg: 'vueX的实践',
    change:'date'
    }
    },
    // 必须要写
    store,
    // 接收state的方式有三种
    // 1.引入store直接 使用插值的方式 {{$store.state.count}}
    // 2.在computed中 声明一个方法 把$store.state.count return出来
    // 3.通过mapState 在computed中进行引入 ...mapstate(["stateValue"])
    computed:{
    // state第二种
    countTwo(){
    return this.$store.state.count;
    },
    // state第三种
    ...mapState(["count"]),
    
    //引入getters
    // 使用mapGetters的方法类似于state的引入 两种引入方法
    // 1.在computed中 声明方法 把this.$store.getters.count return出来
    // 2.通过mapGetters 在computed中进行引入 ...mapGetters(["gettersValue"])
    
    // getters第一种获取方法
    // count(){
    // return this.$store.getters.count;
    // }
    // getters第二种获取方法
    ...mapGetters(["count"])
    },
    // 调用仓库中mutations的方法的两种
    //1.引入store直接 直接在dom上绑定事件 @click="$store.commit('事件名称','参数')"
    //2.引入mapMutations 在methods中进行注册:...mapMutations(["add"]),如果有参数..只能在dom绑定方法时进行传递..
    //eg: <input @click="add(10)"/>
    
    //调用仓库中action的方法跟mutations的方法相同 也是两种
    methods:{
    ...mapMutations(["add","reduce"]),
    ...mapActions(['addAction',"reduceAction"]),
    toChange(){
    this.change = 'text'
    }
    },
    created(){
    console.log([...mapMutations])
    },
    }
    </script>
    
    <style scoped>
    </style>
    



    完整vuex.js:
    import vue from "vue";
    import vuex from 'vuex'
    vue.use(vuex)
    
    // state 是状态 或是变量 字面量形式
    const state= {
    count:10
    }
    //mutation 修改状态 也可以理解为同步方法 跟下面的action异步 执行顺序相反
    const mutations = {
    // 传参
    add(state,n){
    console.log(n)
    state.count++
    },
    reduce(state){
    state.count--
    }
    }
    //getters 状态过滤 类似于computed 每改变一个state就进行一次过滤
    const getters = {
    // const:function(){} ==== var const =function(){return value}
    //state参数是状态那个对象
    count:function(state){
    return state.count+=100
    }
    }
    
    // action 处理异步方法 可以调用mutations里面的方法
    const actions = {
    // 先执行
    addAction(context){
    context.commit('add',10)
    },
    // 后执行 因为是异步
    reduceAction(context){
    context.commit('reduce')
    }
    }
    
    // 暴露出去
    export default new vuex.Store({
    state,
    mutations,
    getters,
    actions
    })
    
    vuex存值:
    state:{
    value:''
    }
    
    mutations:{
    changeValue(state,newVal){
    state.value=newVal
    }
    }
    

    //存

    this.$store.commit('changeValue',1)
    

    //取

    console.log(this.$store.state.value)//1
    

    文章评论

    评论列表(0