vue正确的使用vuex

简介: vue正确的使用vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。现在大型项目基本上都需要使用vuex,所以专门写一遍如何配置与使用vuex供人探讨。

一、安装vuex

1、终端安装 npm install vuex --save

2、创建store文件夹,文件夹里新建index.js与modules文件夹(vuex模块化)

index.js代码如下:

import Vue from 'vue'
import Vuex from 'vuex'
//引入模块
import a from './modules/a'
import b from './modules/b'
import c from './modules/c
export default new Vuex.Store({
  state: {
    axiosCancel: []
  },
  mutations: {},
  actions: {},
  modules: {
    a,
    b,
    c
  }
})

modules里面放置store模块

比如a模块里面代码(namespaced作用:为了解决不同模块命名冲突的问题,将不同模块的

namespaced:true,之后在不同页面中引入getter、actions、mutations时,需要加上所属的模块名)

const state = {
  basePath: 'homepage'
}
const mutations = {
  CHANGE_BASEPATH: (state, path) => {
    state.basePath = path
  }
}
const actions = {
  changeBasePath({ commit }, path) {
    commit('CHANGE_BASEPATH', path)
  }
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

3 main.js文件引入

代码如下:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from '@/store'
Vue.config.productionTip = false
Vue.prototype.$echarts = echarts
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

二、使用vuex

新建一个demo代码如下:

<template>
  <div class="">a模块调用mutation的值:{{ basePath }}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  components: {},
  data() {
    return {
    }
  },
  computed: {
    ...mapState({
      'basePath': state => state.a.basePath
    })
  },
  watch: {},
  created() {
    // 使用a模块的state
    console.log(this.$store.state.a)
    // 使用a模块的mutation(不推荐这样写,推荐写成对象的形式{path:'qqqq'},这样可以传多个参)
    this.$store.commit('a/CHANGE_BASEPATH', 'qqqq')
    // 使用a模块的action
    this.$store.dispatch('a/changeBasePath', 'bbbb')
  },
  mounted() {},
  methods: {}
}
</script>
<style lang="scss" scoped>
</style>

把state放在computed里这样state的值改变dom的值也改变


相关文章
|
5天前
|
缓存 监控 JavaScript
探讨优化Vue应用性能和加载速度的策略
【5月更文挑战第17天】本文探讨了优化Vue应用性能和加载速度的策略:1) 精简代码和组件拆分以减少冗余;2) 使用计算属性和侦听器、懒加载、预加载和预获取优化路由;3) 数据懒加载和防抖节流处理高频事件;4) 图片压缩和选择合适格式,使用CDN加速资源加载;5) 利用浏览器缓存和组件缓存提高效率;6) 使用Vue Devtools和性能分析工具监控及调试。通过这些方法,可提升用户在复杂应用中的体验。
17 0
|
5天前
|
JavaScript 前端开发
vue(1),小白看完都会了
vue(1),小白看完都会了
|
4天前
|
JavaScript 开发工具 git
Vue 入门系列:.env 环境变量
Vue 入门系列:.env 环境变量
11 1
|
5天前
|
JavaScript 前端开发 定位技术
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
Vue使用地图以及实现轨迹回放 附完整代码
|
5天前
|
JavaScript
Vue中避免滥用this去读取data中数据
Vue中避免滥用this去读取data中数据
|
5天前
|
JavaScript
vue中使用pinia及持久化
vue中使用pinia及持久化
8 0
|
5天前
|
JavaScript 前端开发 UED
Vue class和style绑定:动态美化你的组件
Vue class和style绑定:动态美化你的组件
|
5天前
|
JavaScript 前端开发 API
Vue 监听器:让你的应用实时响应变化
Vue 监听器:让你的应用实时响应变化
|
5天前
|
JavaScript
vue封装svg
vue封装svg
10 0
|
5天前
|
JavaScript
vue封装面包屑组件
vue封装面包屑组件
8 0