20230422----重返学习-vue数据集中管理vuex

最新推荐文章于 2024-10-13 14:36:10 发布
最新推荐文章于 2024-10-13 14:36:10 发布
阅读量438 收藏
点赞数
分类专栏： 重返学习 vue 文章标签： vue.js 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/seetoyou/article/details/130312730
版权
Vuex是一个专为Vue.js设计的状态管理模式，用于集中管理应用的所有组件状态。它提供了state、getters、mutations、actions和modules等核心概念，支持数据持久化和日志插件，便于调试和维护。Vuex通过计算属性和辅助函数如mapState、mapGetters、mapMutations和mapActions简化了组件与全局状态的交互，实现了数据通信和状态缓存功能。
摘要由CSDN通过智能技术生成

day-055-fifty-five-20230422-vue数据集中管理vuex

vuex

vuex的说明

  • vuex是专门为vue提供的大仓库，采用状态管理的大仓库
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
    • 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex与vue版本的关联

  • 一般vuex要比vue的版本多1
    • vue2 —> vuex3
    • vue3 —> vuex4

vuedevtools安装

  1. 解压vuedevtools文件夹
  2. 打开谷歌浏览器进行安装
    • 网页右上角没有的V可以点开这个拼图图标，然后把V置顶就出现了
  3. 安装完成后，需要重新启动vue项目

安装vuex

  • 方法1. 创建项目的时候，直接选vuex

    1. src目录先多一个文件夹 store —> index.js(写好的模板)导出仓库

      • 多一个文件/src/store/index.js，里面会让vue使用vuex这个插件，同时初始化一个Vuex实例对象，并导出。

        import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)//让Vue构造函数使用了Vuex这个vue插件
const store=new Vuex.Store({})// 创建一个Vuex实例对象
export default store;// 导出Vuex实例对象

      • /src/main.js中会导入Vuex实例对象，并将其挂载到根Vue实例对象上。

        import store from './store'
let vm=new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

  • 方法2. 创建项目的，没有选择vuex

    1. 重新安装vuex这个vue插件的npm依赖

      npm install vuex --save//使用npm方式，个人推荐，最基础的方式
//yarn add vuex//yarn方式，npm方式因网络不好时再用

    2. 安装好vuex之后，项目中关于vuex的什么基础操作都没有，需要自己手动编写和操作

      • 安装依赖的作用，主要是可以通过import Vuex from 'vuex'在项目中可以导入Vuex这个vue插件。

    3. src目录先多一个文件夹 store —> index.js(写好的模板)导出仓库

      • 多一个文件/src/store/index.js，里面会让vue使用vuex这个插件，同时初始化一个Vuex实例对象，并导出。

        import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)//让Vue构造函数使用了Vuex这个vue插件
const store=new Vuex.Store({})// 创建一个Vuex实例对象
export default store;// 导出Vuex实例对象

      • /src/main.js中会导入Vuex实例对象，并将其挂载到根Vue实例对象上。

        import store from './store'
let vm=new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

vue五大模块

  • state: {} 相当于vue中的data

    • 设置值：

      export default new Vuex.Store({
  state: {
    num:100,
    str:"hello"
  }
})

    • 获取值：

      • 通过this.$store.state拿到state对象里的数据

        1. 直接取

          <template>
  <div>{{ $store.state.num }}</div>
</template>

          <script>
export default {
  mounted() {
    this.$store.state.num
  }
};
</script>

        2. 通过data取

          <script>
export default {
  data(){
    return {
      dataNum:this.$store.state.num
    }
  }
};
</script>

        3. 通过computed

          • 推荐
          <script>
export default {
  computed:{//推荐
    dataNum(){
      return this.$store.state.num
    }
  }
};
</script>

      • 通过mapState()辅助函数拿到state对象里的数据

        1. mapState()辅助函数

          • 推荐
          <template>
  <div>{{ num }}--{{ str }}</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed:mapState(["num","str"])
};
</script>

          • 步骤

            1. 引入

              import { mapState } from 'vuex';

            2. 配合计算属性使用

              computed:mapState(["num","str"])

              computed:{...mapState(["num","str"])}

          • 使用类型

            • 数组:直接接收，直接使用

              <template>
  <div>{{ num }}--{{ str }}</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed:mapState(["num","str"])
};
</script>

            • 对象：接收后，换一个名称

              <template>
  <div>{{ nn }}---{{ ss }}---{{ mm }}</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed:mapState({
    nn:state=>state.num,//使用函数的方式
    ss:"str",//使用字符串的方式

    //使用函数ES6简写的方式
    mm(state){
      return state.num+200
    }
  })
};
</script>

          • 辅助函数 与 计算属性的其他属性共存

            <template>
  <div>{{ nn }}---{{ fullName }}---{{ str }}</div>
</template>
<script>
import { mapState } from 'vuex';
export default {
  computed:{
      ...mapState({
        nn:state=>state.num
      }),
      fullName(){
        return 5555
      },
      ...mapState(['str'])
  }
};
</script>

  • getters: {}: 相当于vue中的计算属性,对state的数据二次处理

    • 函数的写法，属性的用法。

    • 设置值：

      export default new Vuex.Store({
  state: {
    arr:[10,20,30,40,50,60]
  },
  getters:{
    //函数的写法，属性的用法
    //作用 state里面的数据进行二次处理返回
    //箭头函数写法
    newarr:(state)=>{
      return state.arr.filter((item)=>item>30)
    }
    
    //ES6写法
    //newarr(state) {
    //  return state.arr.filter((item) => item > 30);
    //},
  }
})

      export default new Vuex.Store({
  state: {
    arr:[10,20,30,40,50,60]
  },
  getters:{
    //ES6写法
    newarr(state) {
      return state.arr.filter((item) => item > 30);
    },
  }
})

    • 获取值：

      • 通过this.$store.state拿到getters对象里的数据

        1. 直接取

          <template>
  <div>{{ $store.getters.newarr }}</div>
</template>

          <script>
export default {
  mounted() {
    this.$store.getters.newarr
  }
};
</script>

        2. 通过data取

          <script>
export default {
  mounted() {
    this.dataNum
  },
  data(){
    return {
      dataNum:this.$store.getters.newarr
    }
  }
};
</script>

        3. 通过computed

          • 推荐
          <script>
export default {
  mounted() {
    this.computedNum
  },
  computed:{//推荐
    computedNum(){
      return this.$store.getters.newarr
    }
  }
};
</script>

      • 通过mapGetters()辅助函数拿到getters对象里的数据

        1. mapGetters()辅助函数

          • 推荐
          <template>
  <div>{{ newarr }}</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  computed:mapGetters(["newarr"])
};
</script>

          • 步骤

            1. 引入

              import { mapGetters } from 'vuex';

            2. 配合计算属性使用

              computed:mapGetters(["newarr"])

              computed:{...mapGetters(["newarr"])}

          • 使用类型

            • 数组:直接接收，直接使用

              <template>
  <div>{{ newarr }}</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  computed:mapGetters(["newarr"])
};
</script>

            • 对象：接收后，换一个名称

              <template>
  <div>{{ arr }}</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  computed:mapGetters({arr:"newarr"})
};
</script>

          • 辅助函数 与 计算属性的其他属性共存

            <template>
  <div>{{ newarr }}---{{ arr }}</div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  computed:{
      ...mapGetters(["newarr"]),
      fullName(){
        return 5555
      },
      ...mapGetters({arr:"newarr"})
  }
};
</script>

  • mutations: {} 同步方法（仓库管理员）

    • vuex是单向数据流，state只能通过Mutation来修改

    • 设置方法：

      export default new Vuex.Store({
  state: {
    num:100
  },
  mutations: {
    //箭头函数写法
    //无入参
    addNum:(state)=>{
      state.num++
    },
  }
})

      export default new Vuex.Store({
  state: {
    num:100
  },
  mutations: {
    //箭头函数写法
    //有入参
    addNum:(state,payload)=>{
      //console.log(payload);
      //state.num++
      state.num+=payload.n;
    }
  }
})

      export default new Vuex.Store({
  state: {
    num:100
  },
  mutations: {
    //ES6简写写法
    //无入参
    addNum(state){
      state.num++
    },
  }
})

      export default new Vuex.Store({
  state: {
    num:100
  },
  mutations: {
    //ES6简写写法
    //有入参
    addNum(state,payload){
      console.log(payload);
      state.num+=payload.n;
    }
  }
})

    • 使用方法：

      • 通过this.$store.commit()使用mutations对象里的同步方法

        • 要想执行 mutations里面的方法，必须通过 commit()

          • commit(函数名，参数) 只有两个值
            • 如果第二个参数那里，想要传递多个内容，可以使用数组，对象
          <template>
  <div>
    {{ $store.state.num }}
    <button @click="add">add</button>
  </div>
</template>

<script>
export default {
  methods:{
    //  add(){//页面数据可以修改，仓库数据无法修改
    //     this.$store.state.num++;
    //  }
    add(){//要想执行 mutations里面的方法，必须通过 commit()
      //commit(函数名，参数) 只有两个值  
      //如果第二个“参数”，想要传递多个内容，数组，对象
      this.$store.commit("addNum",{n:10,m:20})
    }
  }
}
</script>

      • 通过mapMutations()辅助函数使用mutations对象里的同步方法

        1. mapMutations()辅助函数

          <template>
  <div>
    {{ $store.state.num }}
    <button @click="add({n:10,m:20})">add</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  methods:{
    ...mapMutations({
      add:"addNum"
    })
  }
};
</script>

          • 步骤

            1. 引入

              import { mapMutations } from 'vuex';

            2. 配合methods属性使用

              methods:mapMutations({add:"addNum"})

              methods:{...mapMutations({add:"addNum"})}

          • 使用类型

            • 数组:直接接收，直接使用

              <template>
  <div>
    {{ $store.state.num }}
    <button @click="addNum({n:10,m:20})">addNum</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  methods:mapMutations(["addNum"]),
};
</script>

            • 对象：接收后，换一个名称

              <template>
  <div>
    {{ $store.state.num }}
    <button @click="add({n:10,m:20})">add</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  methods:mapMutations({add:"addNum"}),
};
</script>

          • 辅助函数 与 methods的其他方法共存

            <template>
  <div>
    {{ $store.state.num }}
    <button @click="addNum({n:10,m:20})">addNum</button>
    <button @click="add({n:10,m:20})">add</button>
  </div>
</template>
<script>
import { mapMutations } from 'vuex';
export default {
  methods:{
    ...mapMutations(["addNum"]),
    ...mapMutations({add:"addNum"})
  }
};
</script>

  • actions: {}

    • 设置异步方法

      export default new Vuex.Store({
  state: {
    n:10
  }
  mutations: {
    addN(state,payload){//通过mutations做异步操作效果实现的不对
        state.n+=payload;
    }
  },
  actions: {
    AsyncAddN(context,payload){
      //console.log(context);//{commit,...}
      setTimeout(() => {
          context.commit("addN",payload);
      }, 1000);
    }
  }
})

    • 使用异步方法

      <template>
  <div>
    {{ $store.state.n }}
    <button @click="addN()">addN</button>
  </div>
</template>

<script>
export default {
  methods:{
    addN(){
      //this.$store.commit("addN")
      //通过dispatch来调用 actions
      this.$store.dispatch("AsyncAddN",10)
    }
  }
}
</script>

    • 使用辅助函数-对象可改名

      <template>
  <div>
    {{ $store.state.n }}
    <button @click="add(10)">add</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  methods:{
    ...mapActions({
      add:"AsyncAddN"
    })
  }
}
</script>

    • 使用辅助函数-数组不可改名

      <template>
  <div>
    {{ $store.state.n }}
    <button @click="AsyncAddN(10)">add</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex';
export default {
  methods:{
    ...mapActions(["AsyncAddN"])
  }
}
</script>

  • modules: {} 模块，将仓库进行划分，每个模块仍然具有五部分

    • 模式一: 不区别getters与mutations等

      • 设置

        const ModelA={
  state:{
    arra:[1,2,3,4,5]
  },
  getters:{
    newarra(store){
      return store.arra.filter((item)=>{
          return item>3
      })
    }
  }
}

const ModelB={
  state:{
    numb:200
  },
  mutations:{
    changeNum(state){
        state.numb+=10;
    }
  }
}


export default new Vuex.Store({
  modules: {
    a:ModelA,
    b:ModelB
  }
})

      • 使用

        <template>
  <div>
    {{ $store.state.b.numb }}
    {{ $store.getters.newarra }}
    <button @click="changeNum()">changeNum</button>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
export default {
  methods:{
    ...mapMutations(["changeNum"])
  }
}
</script>

    • 模式二：使用命名空间，区别getters与mutations等

      namespaced: true,//添加命名空间

      • 设置

        const ModelC = {
  namespaced: true,
  state: {
    arra: [1, 2, 3, 4, 5],
  },
  getters: {
    newarra(state) {
      return state.arra.filter((item) => item > 3);
    },
  },
};

const ModelD = {
  namespaced: true,
  state: {
    numd: 5,
  },
  mutations: {
    changeNumd(state, payload = 10) {
      state.numd += payload;
    },
  },
  actions: {
    asyncChangeNumd(context, payload = 100) {
      setTimeout(() => {
        context.commit("changeNumd", payload);
      }, 1000);
    },
  },
};


export default new Vuex.Store({
  modules: {
    c: ModelC,
    d: ModelD,
  }
})

      • 使用

        • 方法一，使用命名空间直接访问

          <template>
  <div>
    <h1>ModulesView01</h1>
    <div>$store.getters["c/newarra"] --- {{ $store.getters["c/newarra"] }}</div>
    <div>mapGetters('c',['newarra']) --- {{ newarra }}</div>
    <div>{{ $store.state.d.numd }}</div>
    <div>
      <button @click="changeNumd()">
        同步改变值-辅助函数-数组-mapMutations("d", ["changeNumd"])
      </button>
      <button @click="asyncChangeNumd()">
        异步改变值-辅助函数-数组-mapActions("d", ["asyncChangeNumd"])
      </button>
    </div>

    <div>
      <button @click="handleChange01()">
        同步改变值-commit-对象-mapMutations({ handleChange01: "d/changeNumd" })
      </button>
      <button @click="handleChange02()">
        异步改变值-dispatch-对象-mapActions({ handleChange02:
        "d/asyncChangeNumd" })
      </button>
    </div>
    <div>
      <button @click="handleChange03()">
        同步改变值-辅助函数-对象-mapMutations("d", { handleChange03:
        "changeNumd" })
      </button>
      <button @click="handleChange04()">
        异步改变值-辅助函数-对象-mapActions("d", { handleChange04:
        "asyncChangeNumd" })
      </button>
    </div>
    <div>
      <button @click="handleChange05()">同步改变值-commit-this.$store.commit("d/changeNumd", num)</button>
      <button @click="handleChange06()">异步改变值-dispatch-this.$store.dispatch("d/asyncChangeNumd", num)</button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
import { mapActions } from "vuex";
export default {
  computed: {
    ...mapGetters("c", ["newarra"]),
  },
  methods: {
    ...mapMutations("d", ["changeNumd"]), //常用，推荐使用方式
    ...mapActions("d", ["asyncChangeNumd"]), //常用，推荐使用方式

    ...mapMutations({ handleChange01: "d/changeNumd" }),
    ...mapActions({ handleChange02: "d/asyncChangeNumd" }),

    ...mapMutations("d", { handleChange03: "changeNumd" }),
    ...mapActions("d", { handleChange04: "asyncChangeNumd" }),

    handleChange05() {
      this.$store.commit("d/changeNumd"); //常用，推荐使用方式
    },
    handleChange06() {
      this.$store.dispatch("d/asyncChangeNumd"); //常用，推荐使用方式
    },
  },
};
</script>

          • 简洁

            <template>
  <div>
    <h1>ModulesView01</h1>
    <div>$store.getters["c/newarra"] --- {{ $store.getters["c/newarra"] }}</div>
    <div>mapGetters('c',['newarra']) --- {{ newarra }}</div>
    <div>{{ $store.state.d.numd }}</div>
    <div>
      <button @click="changeNumd()">
        同步改变值-辅助函数-数组-mapMutations("d", ["changeNumd"])
      </button>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { mapMutations } from "vuex";
export default {
  computed: {
    ...mapGetters("c", ["newarra"]),
  },
  methods: {
    ...mapMutations("d", ["changeNumd"]), //常用，推荐使用方式
  },
};
</script>

        • 方法二：使用import { createNamespacedHelpers } from "vuex";

          <template>
  <div>
    <h1>ModulesView01</h1>
    <div>$store.getters["c/newarra"] --- {{ $store.getters["c/newarra"] }}</div>
    <div>mapGetters(['newarra']) --- {{ newarra }}</div>
    <div>{{ $store.state.d.numd }}</div>
    <div>
      <button @click="changeNumd()">
        同步改变值-辅助函数-数组-mapMutations(["changeNumd"])
      </button>
      <button @click="asyncChangeNumd()">
        异步改变值-辅助函数-数组-mapActions(["asyncChangeNumd"])
      </button>
    </div>

    <div>
      <button @click="handleChange01()">
        同步改变值-commit-对象-mapMutations({ handleChange01: "changeNumd" })
      </button>
      <button @click="handleChange02()">
        异步改变值-dispatch-对象-mapActions({ handleChange02:
        "asyncChangeNumd" })
      </button>
    </div>
    <div>
      <button @click="handleChange05()">
        同步改变值-commit-this.$store.commit("d/changeNumd", num)
      </button>
      <button @click="handleChange06()">
        异步改变值-dispatch-this.$store.dispatch("d/asyncChangeNumd", num)
      </button>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapGetters } = createNamespacedHelpers("c");
const { mapMutations } = createNamespacedHelpers("d");
const { mapActions } = createNamespacedHelpers("d");
export default {
  computed: {
    ...mapGetters(["newarra"]),
  },
  methods: {
    ...mapMutations(["changeNumd"]),
    ...mapActions(["asyncChangeNumd"]),

    ...mapMutations({ handleChange01: "changeNumd" }),
    ...mapActions({ handleChange02: "asyncChangeNumd" }),

    handleChange05() {
      this.$store.commit("d/changeNumd"); //常用，推荐使用方式
    },
    handleChange06() {
      this.$store.dispatch("d/asyncChangeNumd"); //常用，推荐使用方式
    },
  },
};
</script>

          • 简洁

            <template>
  <div>
    <h1>ModulesView01</h1>
    <div>$store.getters["c/newarra"] --- {{ $store.getters["c/newarra"] }}</div>
    <div>mapGetters(['newarra']) --- {{ newarra }}</div>
    <div>{{ $store.state.d.numd }}</div>
    <div>
      <button @click="changeNumd()">
        同步改变值-辅助函数-数组-mapMutations(["changeNumd"])
      </button>
    </div>
    <div>
      <button @click="handleChange05()">
        同步改变值-commit-this.$store.commit("d/changeNumd", num)
      </button>
    </div>
  </div>
</template>

<script>
import { createNamespacedHelpers } from "vuex";
const { mapGetters } = createNamespacedHelpers("c");
const { mapMutations } = createNamespacedHelpers("d");
export default {
  computed: {
    ...mapGetters(["newarra"]),
  },
  methods: {
    ...mapMutations(["changeNumd"]),

    handleChange05() {
      this.$store.commit("d/changeNumd"); //常用，推荐使用方式
    },
  },
};
</script>

vuex插件

  1. 日志插件

    • vuex自带一个日志插件用于一般的调试

      import createLogger from 'vuex/dist/logger'
const store = new Vuex.Store({
  plugins: [createLogger()]
})

  2. vuex数据持久化插件

辅助函数

  • vuex有五大重要特性，有四个都有对应的辅助函数

    • 所有的辅助函数大多是一样的使用方式

  • State 相当于vue中的data

    • 辅助函数为mapState()

      import { mapState } from "vuex";

  • Getter 相当于vue中的计算属性,对State的数据二次处理

    • 辅助函数为mapGetters()

      import { mapGetters } from "vuex";

  • Mutation 管理同步方法，专门用来直接修改State中的数据的

    • 辅助函数为mapMutations()

      import { mapMutations } from "vuex";

  • Action 管理异步方法，专门用来调用的Mutation中的同步方法的

    • 辅助函数为mapActions()

      import { mapActions } from "vuex";

  • Module 管理模块的

vuex的作用

  • vuex一般有两个作用
    • 作用一： 实现数据通信
    • 作用二： 数据缓存 切换页面(前进后退)，数据不变(缓存); 除非刷新或者关闭

配置一个路由

  1. 在/src/views/新建一个vue文件，例如叫MutationView.vue

    <template>
  <div>
    <h1>MutationView</h1>
  </div>
</template>

<script>
export default {

}
</script>

  2. 在/src/router/index.js上进行修改，新添加一个动态路由

      //一个动态路由
  {
    path: '/mutationView',//这个是页面URL路径
    name: 'MutationView',//这个是路由页面名称
    component: () => import('../views/MutationView.vue')//这个路径是之前新建文件的文件名。
  }

    import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  },
  {
    path: '/mutationView',//这个是页面URL路径
    name: 'MutationView',//这个是路由页面名称，也是webpack的chunk名称
    component: () => import('../views/MutationView.vue')//这个路径是之前新建文件的文件名。
  }
]

const router = new VueRouter({
  routes
})

export default router

  3. 在根组件上，写一个router-link标签，用于跳转到新建的路由页面。

    • router-link标签的to属性与新建路由的页面URL路径保持一致
    <template>
  <div id="app">
      <router-link to="/mutationView">MutationView</router-link>
    <router-view/>
  </div>
</template>

进阶参考

  1. Vue2配合使用的Vuex3官方中文文档
  2. Vue3配合使用的Vuex4官方中文文档
  3. Vuex官方中文文档–一般照着这个来就行了-这个一般都是最新版最主流的
  4. vuedevtools-官方git仓库
  5. vuex内置-logger-插件
  6. vuex数据持久化插件
方朝端
关注
专栏目录
vuex-i18n：使用vuex作为存储的vue.js 2.0本地化插件
02-28
我们是很棒的vue，vuex和vue-router库的忠实拥护者，他们只是在寻找易于使用的国际化插件，并尽可能多地使用“标准库”。 与其他国际化插件的主要区别是直接在应用程序中或以后从服务器直接使用和支持语言环境。 ...
vue-cli-plugin-modular-vuex:为Vue CLI 3插件创建模块化Vuex存储
05-19
vue-cli-plugin-模块化vuex 为创建模块化Vuex存储 安装 如果尚未安装vue-cli 3，请先按照此处的安装说明进行操作： : 提示：如果由于仍然需要vue init而不想覆盖当前的vue-cli，请。 使用vue-cli 3.0生成项目 ...
vuex-iframe-sync-iframe /窗口之间的Vuex状态同步。-Vue.js开发
05-27
:sparkles:功能：支持在加载iframe时进行iframe / window同步初始化同步，以根据您的特定需求配置同步行为:wrench:要求Vue.js（v2.0.0 +）Vuex（v2.1.0 +）注意window.postMessage对消息有限制，类似于JSON.parse...
vue-vuex-router-element-webpack:基于Vue、Vue router、Vuex、Element搭建的基础MVVM框架
05-08
Vuex (统一状态管理) Vue Router (路由) axios (http库) Element UI (UI框架) Babel (ES6/7代码转译浏览器可执行) Webpack (打包工具) 安装调试 npm i # 或 yarn npm run start # 或 yarn start 打包 npm run build ...
基于Vue+Vuex+Vue-router+EF的ABP开源项目权限管理系统设计源码
09-26
该系统为基于Vue、Vuex、Vue-router和Entity Framework的ABP开源项目，构建了一个完整的权限管理系统。源码包含2604个文件，涵盖多种语言和技术，其中JavaScript、C#、CSS、Vue、TypeScript、HTML等文件类型丰富多样...
腾讯IM SDK：TUIKit发送多张图片
q1003675852的博客
10-09 348
本文记录腾讯IM SDK：TUIKit发送多张图片的实现方法
【Vue】a-radio-group单选框数字与字符串回显问题
叶为正的博客
10-08 262
根据后端接口返回数字或字符串，来配置Ant Design of Vue中a-radio-group单选框的回显问题，注意value中的取值是不一样的。
前端基础面试题·第四篇——Vue（其二）
2301_76380626的博客
10-08 1069
路由跳转 接收参数 params传递参数可以用过页面路由对象route的params属性访问到。 2.query传参 query 传参是通过URL的查询字符串来传递参数，这种方式传递的参数是可选的。 这种方式不需要提前配置路由路径，直接在路由跳转时在路径或者配置中传递参数即可。 路由跳转 接收参数 这种方式传递的参数会挂载到页面路由对象route的query对象上。 2. hash和history路由区别 hash路由地址上在路径后面带#号，history路由地址上不带#号. 在
Element-plus el-form、el-dialog 数据回显同时用时，重置失效问题
Mr. Zhang Xiaojian's Blog
10-12 384
当第一次打开网页并点击“编辑”按钮时，虽然对话框变量变为 true 使对话框可见，但同步代码会将 formData 对象的属性设置为默认值。由于 Vue 的异步更新机制，DOM 实际上还未更新，因此表单组件内绑定了这些有值的初始数据。这样，在后续调用 resetFields 方法时，表单将会重置为这些默认值而不是空值。编辑时表单的初始值被设置成了回显的数据，而不是空字符串。时，表单会回到上次设置的初始值，即回显的数据。
自定义分段式进度条
qq_34465338的博客
10-10 426
在进度条的 div 中添加新的 div 来展示异常进度，颜色可以自定义；在 div 中的 background 使用渐变属性。1、需要进行分段，用来展示正常和异常状态；一样，只是需要不断的进行删除和添加。来展示整个进度条的整体进度。属性来控制异常状态的进度。2、异常状态需要提示信息。
使用 Docker 部署前端项目：Vue 和 React 结合 Nginx 实现静态文件托管
IT小辉同学
10-10 1223
Web 开发中，将前端项目（例如 Vue 或 React 应用）打包后通过 Docker 容器和 Nginx 部署是非常常见的方式。它不仅简化了部署流程，还能确保在不同环境中一致的运行效果。本文将介绍如何使用 Docker 将打包生成的 `dist` 文件夹结合 Nginx 来实现前端项目的静态文件托管与访问。
【vue】03-指令补充+样式绑定+计算属性+侦听器
最新发布
zxj20041003的博客
10-13 590
所谓指令修饰符就是让指令的 功能更强⼤，书写更便捷如何监听回⻋键？​ 答: 1、 @keydown.enter -> 回⻋按下​ 2、@keyup.enter -> 回⻋抬起如何阻⽌默认⾏为、阻⽌冒泡？​ 答: 1、@click.prevent -> 阻⽌默认⾏为​ 2、@click.stop -> 阻⽌冒泡​ 3、 @click.prevent.stop -> 可以链式调⽤, ⼆者都阻⽌v-model的3个修饰符的作⽤是什么？
Vue3 中使用 toRefs的方法
qq_58341172的博客
10-12 190
当我们使用，reactive定义响应式对象的时候，使用let{name,age} = person 解析对象后，其name,age并不是响应式的，因此我们需要使用，toRefs属性，将其转化为响应式的。并且，使用toRefs转化后的name,age其变成了，
vue-自定义指令
Kevin7_35Durant的博客
10-09 474
钩子函数inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新。：指令所在组件的 VNode 及其子 VNode 全部更新后调用。unbind：只调用一次，指令与元素解绑时调用。钩子函数参数。
vue中用父组件刷新子组件中echarts饼图中的数据
servepeople的博客
10-10 653
/ 上面定义的数据。
如何使用ssm实现基于MVC构架的网上食品店的设计与实现+vue
寒夜
10-08 725
【代码】ssm基于MVC构架的网上食品店的设计与实现+vue
Vue3浮动按钮（FloatButton）
Mr Dear的博客
10-10 635
浮动按钮组件，支持：自定义位置；自定义尺寸；自定义类型；自定义形状；自定义图标；自定义文字描述信息；链接跳转；菜单模式；气泡卡片；徽标数等；总之，功能丰富，简单易用😁😁
基于springboot和vue.js 养老院管理系统设计与实现
qq_251836457的博客
10-07 797
本次程序开发选用的数据库管理工具是Mysql数据管理工具，使用它存放数据也需要创建程序对应的数据库文件，并命名刚创建的数据库文件，有了数据库也需要创建各种数据表来充实数据库，在数据表的创建中，不仅需要对数据表命名，也需要对数据表的字段进行设计，包括每个数据表里面需要设置的字段名称，字段对应的数据类型信息，字段的主键设置这个也是不可缺少的，因为每个数据表里面的主键就是标记着这个数据表跟其他数据表相区分的唯一标志。☆☆☆ 精彩专栏推荐订阅☆☆☆☆☆不然下次找不到哟。（11）下图是健康信息实体和其具备的属性。
vue3的知识整理
rita_0567的博客
10-10 884
返回响应式对象，这样，在接收的时候，我们就可以使用解构的方式获取到对象里面的内容，这也是比较符合我们常用的方式。则会将业务相关的部分整合到一起，作为一个模块，当要修改，统一到一处修改，代码看起来会更有条理。它属于高阶技巧，不是基础必会的，有一定的学习成本，是为了解决复杂业务逻辑而设计，就像。2s后，ageRef改了，state.age也跟着改了。等有很多内容时，业务逻辑比较复杂，我们需要修改一部分时，可能要分别到。中对应修改，可能需要我们在页面反复横跳来修改，逻辑块会比较散乱。点击修改值的生命周期。
Vue2.0Vuex实战：基于vue-cli+webpack的组件状态管理
"这篇教程将介绍如何在Vue2.0项目中使用vue-cli和webpack集成Vuex，并通过实例讲解Vuex的基本用法。" 在Vue.js应用中，随着组件数量的增长，组件间通信的需求也会变得复杂。Vue2.0引入了Vuex，它是一个专为Vue.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值