阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Vuex 状态对象同步到 VUE 组件内

      把 Vuex 内的一个状态对象的属性,简写;

      一共两种方式

      • Vuex 的基础搭建
      • mapState 辅助

      DEMO 如下;

      一、Vuex 的基础搭建

      1.src 下面创建 store.js,文件内容如下

      import Vue from 'vue';
      import Vuex from 'vuex';
      Vue.use(Vuex)
      
      const options={
          //状态对象
          state: {
              count: 111
          },
          //触发状态
          mutations: {
              increment (state) {
                  state.count++
              },
              jian(state){
                  state.count
              }
          }
      }
      const store =new Vuex.Store(options)
      export default store;
      

      2.mainjs 中引用

      import Vue from 'vue';
      import App from './App';
      import router from './router';
      import store from './store';
      
      import { create } from 'domain';
      Vue.config.productionTip = false
      /* eslint-disable no-new */
      new Vue({
          el: "#app",
          router,
          store,
          render:h=>h(App)
      })
      

      3. 在 Vue 文件中使用

      <p>Vuex的数据 {{$store.state.count}}</p>

      下面开始正式做数据同步;

      一、computed 动态计算

      computed:{
          detailCount(){
              return this.$store.state.count
          }
      },
      

      在 vue 文件中直接使用组件内的数据即可;

      <p>内部的数据 {{detailCount}}</p>

      二、mapState 辅助;

      在单独构建的版本中辅助函数为 Vuex.mapState 在组件内,先 import;

      import { mapState } from vuex
      computed:mapState({
          count : state => state.count
      })
      

      这样即可;还可以做下面这种简化的写法

      computed:mapState(['count'])
      

      下面这种方法,还是非常常用的;

      如果想连 mutatios 里面的方法也一起简写;

      可以下面这样;

      import { mapState ,mapMutations } from 'vuex'
      
      export default {
        name:"UserDetail",
        data(){
            return{
                logo:"AXIHE"
      
            }
        },
        computed: mapState(['count']),
        methods:mapMutations([
            'increment',
            'jian'
        ]),
        watch:{
            '$route'(to,form){
                console.log(to)
                console.log(form)
            }
        }
      }
      

      这样的话,就可以直接使用了;

      目录
      目录