首页 > 其他 > 详细

vueX的简单使用

时间:2019-05-21 13:14:24      阅读:125      评论:0      收藏:0      [点我收藏+]

引入什么的都不说了,前面说过了,

下面简单列出今天简单使用的情况:

store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    pageName:‘签到须知‘
  },
  getters:{
    pageName(state){
      return state.pageName;
    }
  },
  mutations: {
    setPageName(state,val){
      state.pageName=val;
    }
  },
  actions: {

  }
});

页面内:

<script>
import {mapGetters,mapActions} from vuex;
 
export default {
    data(){
        return{
            text:"头部",
        }
    },
    computed:{
        ...mapGetters([
            pageName//获取到state数据。
        ])
    },
    mounted(){
        this.$store.commit("setPageName","呵呵");
        console.log(this.$store.getters.pageName);
    },
    methods:{
       aa(){
           this.$store.commit("setPageName","嗯嗯嗯");
       } 
    }
}
</script>

这样,可以把pageName双向绑定在页面上,只要store里的pageName值一变,页面就会做出相应的反应。

还有很多种用法,以后再上码

 

vueX的简单使用

原文:https://www.cnblogs.com/fqh123/p/10899113.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!