vueX的简单使用

Posted 2021-12-02 fqh123

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

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

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值一变，页面就会做出相应的反应。

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