vuex的使用说明（个人专用）

已于 2022-11-25 18:02:28 修改
阅读量78 收藏
点赞数 1
分类专栏： 前端开发 文章标签： vue.js javascript 前端
于 2022-11-25 17:57:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48288364/article/details/128000937
版权

文章目录

1. 初识vuex

1.1 vuex官网

学习任何一门计算机语言之前，去查看具有权威的官方文档是一个明智之举。
vuex官网直链

1.2 什么情况下应该使用vuex？

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。

2. 在项目中引入 vuex （以下是直接进行了功能模块划分进行的使用说明）

2.1 安装 vuex

npm install vuex

2.2 按功能进行模块划分

2.2.1 引入所有模块所需的文件 – index.js

在项目文件夹 src 里，创建 store 文件夹，再在 store 里创建 index.js 文件，文件代码具体如下

import Vue from 'vue'
import Vuex from 'vuex'

// 引入功能模块  moduleA 、 moduleB
import moduleA from "./modules/moduleA.js"
import moduleB from "./modules/moduleB.js"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  modules: {
    //  按功能拆分module模块后，把所有的功能模块 挂载到 总的 store 上
    moduleA,
    moduleB
  }
})

2.2.2 按功能划分的模块A – moduleA.js

/*  
 *  根据功能进行拆分的功能模块一   -- moduleA
 */

import axios from 'axios'
export default {
  // 命名空间必须打开，个人项目中为了保证每个模块之间的独立性，防止命名冲突产生报错的问题，选择打开
  namespaced: true, //开启命名空间（防止属性名冲突）

  /* 
   * state 相当于 vue 中的 data，存储的数据
   */
  state: {
    scheduleTypeEnum: [{
        value: 'IPI',
        description: '等额本金'
      },
      {
        value: 'EPI',
        description: '等额本息'
      },
      {
        value: 'IOI',
        description: '一次还本按频率结息'
      },
      {
        value: 'FPI',
        description: '利随本清'
      },
      {
        value: 'UDS',
        description: '用户自定义还款计划'
      }
    ]
  },

  /* 
   *getters 相当于 computed 计算属性
   */
  getters: {},

  /* 
   * mutations 执行 同步操作
   */
  mutations: {},

   /* 
   * actions 执行 异步操作
   */
  actions: {}
}

2.2.3 按功能划分的模块B – moduleB

/*  
 *  根据功能进行拆分的功能模块一   -- moduleB
 */
export default {
  state: {},
  getters: {},
  mutations: {},
  actions: {}
}

2.2.4 在具体的页面中的使用

此处只举例 state

<template>
  <div class="page-vuexUsed">
      <div>{{scheduleTypeEnum}}</div>
  </div>
</template>

<script>
export default {
  name: 'vuexUsed',
  components: {},
  data () {
    return {
       scheduleTypeEnum: null
    }
  },
  computed: {
    // state
    getScheduleTypeEnum () {
      return this.$store.state.moduleA.scheduleTypeEnum
    }
  },
  created () { },
  mounted () {
  },
  methods: {}
}
</script>

3. vuex在页面开发中的使用详细说明

下面state、getter、mutation、action、modules部分所需引入的完整的功能模块 moduleA.js 文件，具体代码如下：

/*  
 *  根据功能进行拆分的功能模块一   -- moduleA
 */
import axios from 'axios'
export default {
  namespaced: true, //开启命名空间 避免属性名冲突

  /* 
   * state 相当于 vue 中的 data，存储的数据
   */
  state: {
    userInfo: null,
    scheduleTypeEnum: [{
        value: 'IPI',
        description: '等额本金'
      },
      {
        value: 'EPI',
        description: '等额本息'
      },
      {
        value: 'IOI',
        description: '一次还本按频率结息'
      },
      {
        value: 'FPI',
        description: '利随本清'
      },
      {
        value: 'UDS',
        description: '用户自定义还款计划'
      }
    ],
    personOne: "Zhang San",
    productsNum: 0
  },

  /* 
   *getters 相当于 computed 计算属性
   */
  getters: {
    // 修改personOne(使用情形：很多页面使用到personOne,需要修改)
    changePersonOne(state) {
      return `hello ${state.personOne}`
    }
  },

  /* 
   * mutations 执行 同步操作
   */
  mutations: {
    // 固值更改
    changeProductsNum(state) {
      state.productsNum++
    },
    // 传值更改
    changePersonOneName(state, newName) {
      state.personOne = newName.newName
    }
  },

  /* 
   * actions 执行 异步操作
   */
  actions: {
    // 调取获取用户信息 mock接口
    getUserInfo() {
      axios.get("/user/userInfo").then(res => {
        console.log(res.data.data, "actions -- getUserInfo")
      })
    }
  }
}

3.1 state

<script>
import { mapState } from "vuex"
export default {
  name: 'vuexUsed',
  components: {},
  data () {
    return {
      state_personOne: null,
      state_productsNum: null
    }
  },
  computed: {
    /*  1.  state -- 应用
   获取 store 仓库中 state 中 存储的 数据
   
   第一种方式：
   直接通过 this.$store.state 获取   例：this.$store.state.moduleA.scheduleTypeEnum（官方建议此方法写到计算属性中，让代码显得优雅）
   
   第二种方式：
   引入vuex的mapState方法，再把相关的解构到methods中，用this直接调用，即可 （官方推荐使用第二种）
   */
    // 例：第一种方式写在 computed 中
    getScheduleTypeEnum () {
      return this.$store.state.moduleA.scheduleTypeEnum
    },

    //注意： 按功能进行模块划分后，如下方法行不通，输出为 undefined
    //     XXXX  此方法错误   XXXX
    // error :  ...mapState(["scheduleTypeEnum"]),

    // 需采用此  开启了 namespaced命名空间后的  方法 （官方建议mapState写到计算属性中，让代码显得优雅）
    ...mapState("moduleA", ['scheduleTypeEnum', "personOne", "productsNum"]),
  },
  created () { },
  mounted () {
    // state
    this.state_personOne = this.personOne
    this.state_productsNum = this.productsNum
    console.log(this.getScheduleTypeEnum, "state -- getScheduleTypeEnum")
    console.log(this.scheduleTypeEnum, "state -- scheduleTypeEnum")
  },
  methods: {

  }
}
</script>

<template>
  <div class="page-vuexUsed">
    <div>{{scheduleTypeEnum}}</div>
    <ul>
      <li>state.personOne:{{state_personOne}}</li>
      <li>state.personOne:{{state_productsNum}}</li>
    </ul>
  </div>
</template>

3.2 getter

<script>
import { mapGetters } from "vuex"
export default {
  name: 'vuexUsed',
  components: {},
  data () {
    return {
    }
  },
  computed: {
    /*  2.  getters -- 应用
    调用 store 仓库中 getters 中 封装的 方法
      第一种方式：
     直接通过 this.$store.getters 调用   例：this.$store.getters["moduleA/changePersonOne"]

     第二种方式：
     引入vuex的mapGetters方法，再把相关的getters解构到methods中，用this直接调用，即可 （官方推荐使用第二种）
    */
    // 例：第一种方式写在 computed 中
    changePersonOne1 () {
      return this.$store.getters["moduleA/changePersonOne"]
    },
    // 解构 总store 中 moduleA里的getters方法
    ...mapGetters("moduleA", ['changePersonOne']),
  },
  created () { },
  mounted () {
    // getters
    console.log(this.changePersonOne1, "getters -- changePersonOne1")
    console.log(this.changePersonOne, "getters -- changePersonOne")
  },
  methods: {

  }
}
</script>

<template>
  <div class="page-vuexUsed"></div>
</template>

3.3 mutation

<script>
import { mapMutations } from "vuex"
export default {
  name: 'vuexUsed',
  components: {},
  data () {
    return {
      state_personOne: null,
      state_productsNum: null
    }
  },
  computed: {},
  created () {},
  mounted () {},
  methods: {

    /* 3.  mutation -- 应用
      调用 store 仓库中 actions 中封装的 同步方法
      第一种方式：(官方建议  传值修改时，传入一个对象，让代码看起来更美观)
      直接通过this.$store。commit 调用    例：
      固值修改方法调用：  this.$store.commit("moduleA/changeProductsNum")
      传值修改方法调用：  this.$store.commit("moduleA/changePersonOneName",{newName:"Li Si"})
  
    */
    // 解构 总store 中 moduleA里面的同步方法
    ...mapMutations("moduleA", ["changePersonOneName", "changeProductsNum"]),
    change_state_personOne () {
      // 直接调用 mutations 同步方法
      // this.$store.commit("moduleA/changePersonOneName", { newName: "Li Si" })
      // this.state_personOne = this.personOne
      // 解构调用 mutations 同步方法
      this.changePersonOneName({ newName: "Li Si" })
      // 再把 state 中更改过后的值 赋给当前页面 data 中的数据
      this.state_personOne = this.personOne
    },
    change_state_productsNum () {
      // 直接调用 mutations 同步方法
      // this.$store.commit("moduleA/changeProductsNum")
      // this.state_productsNum = this.productsNum

      // 解构调用 mutations 同步方法
      this.changeProductsNum()
      this.state_productsNum = this.productsNum
    }

  }
}
</script>

<template>
  <div class="page-vuexUsed">
    <div>{{scheduleTypeEnum}}</div>
    <ul>
      <li>state.personOne:{{state_personOne}}</li>
      <li>state.personOne:{{state_productsNum}}</li>
      <li>
        <button @click="change_state_personOne">change_state_personOne</button>
        <button @click="change_state_productsNum" style="margin-left:50px">change_state_productsNum</button>
      </li>
    </ul>
  </div>
</template>

3.4 action

<script>
import { mapActions } from "vuex"
export default {
  name: 'vuexUsed',
  components: {},
  data () {
    return {}
  },
  computed: {},
  created () { },
  mounted () {
    /*  4.  actions -- 应用
    调用 store 仓库中 actions 中 封装的 异步方法
     第一种方式：
     直接通过 this.$store.dispatch 调用   例：this.$store.dispatch('getUserInfo')

     第二种方式：
     引入vuex的mapActions方法，再把相关的actions解构到methods中，用this直接调用，即可 （官方推荐使用第二种） 
    */
    this.$store.dispatch('moduleA/getUserInfo')
    
    this.getUserInfo()
  },
  methods: {
    // 解构 总store 中 moduleA里的异步方法
    ...mapActions("moduleA", ["getUserInfo"]),
  }
}
</script>

<template>
  <div class="page-vuexUsed"></div>
</template>

3.5 module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

此处因个人习惯和在大多数项目应用按功能模块进行划分的次数居多，只对按功能模块进行分隔进行说明，具体的使用可以参考本文，2.1部分。

4. 以上 在项目中引入vuex 提及的所有代码

4.1 store文件夹 (存放关于所有vuex模块数据逻辑的文件夹)

4.1.1 index.js (管理所有的module模块)

/* vuex状态管理仓库  的使用
 *   按功能进行拆分成 不同的 Module模块
 */

import Vue from 'vue'
import Vuex from 'vuex'

// 引入功能模块  moduleA
import moduleA from "./modules/moduleA.js"
import moduleB from "./modules/moduleB.js"
import codeAutoData from "./codeAutoCreateData/codeAutoData.js"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  modules: {
    //  按功能拆分module模块后，把所有的功能模块 挂载到 总的 store 上
    moduleA,
    moduleB
  }
})

4.1.2 main.js(将 store 对象挂载到vue实例上)

import Vue from 'vue';
import App from './App.vue';

// 引入  按功能模块进行划分的  vuex状态管理仓库
import store from './store/index.js'

Vue.config.productionTip = false;

(window as any).vm = new Vue({
  router,
  store, // 将 store 对象挂载到vue实例上
  render: (h) => h(App),
}).$mount('#app');

4.1.3 moduleA.js (按功能进行拆分的模块)

/*  
 *  根据功能进行拆分的功能模块一   -- moduleA
 */
import axios from 'axios'
export default {
  // 命名空间必须打开，否则 
  namespaced: true, //开启命名空间 避免属性名冲突

  /* 
   * state 相当于 vue 中的 data，存储的数据
   */
  state: {
    userInfo: null,
    scheduleTypeEnum: [{
        value: 'IPI',
        description: '等额本金'
      },
      {
        value: 'EPI',
        description: '等额本息'
      },
      {
        value: 'IOI',
        description: '一次还本按频率结息'
      },
      {
        value: 'FPI',
        description: '利随本清'
      },
      {
        value: 'UDS',
        description: '用户自定义还款计划'
      }
    ],
    personOne: "Zhang San",
    productsNum: 0
  },

  /* 
   *getters 相当于 computed 计算属性
   */
  getters: {
    // 修改personOne(使用情形：很多页面使用到personOne,需要修改)
    changePersonOne(state) {
      return `hello ${state.personOne}`
    }
  },

  /* 
   * mutations 执行 同步操作
   */
  mutations: {
    // 固值更改
    changeProductsNum(state) {
      state.productsNum++
    },
    // 传值更改
    changePersonOneName(state, newName) {
      state.personOne = newName.newName
    }
  },

  /* 
   * actions 执行 异步操作
   */
  actions: {
    // 调取获取用户信息 mock接口
    getUserInfo() {
      axios.get("/user/userInfo").then(res => {
        console.log(res.data.data, "actions -- getUserInfo")
      })
    }
  }
}

4.1.4 moduleB.js (按功能进行拆分的模块)

/*  
 *  根据功能进行拆分的功能模块一   -- moduleB
 */
export default {
  state: {

  },
  getters: {},
  mutations: {

  },
  actions: {

  }
}

4.1.5 vuexUsed.vue (具体使用vuex的文件)

<!--
  * @description: vuex状态管理仓库  的使用
  该功能页采用 modules模块划分 并开启了 namespaced命名空间（多个store仓库挂载到一个总的 store上），与单独一个store使用有所区别
-->
<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex"
export default {
  name: 'vuexUsed',
  components: {},
  data () {
    return {
      state_personOne: null,
      state_productsNum: null
    }
  },
  computed: {
    /*  1.  state -- 应用
   获取 store 仓库中 state 中 存储的 数据
   第一种方式：
   直接通过 this.$store.state 获取   例：this.$store.state.moduleA.scheduleTypeEnum（官方建议此方法写到计算属性中，让代码显得优雅）
   
   第二种方式：
   引入vuex的mapState方法，再把相关的解构到methods中，用this直接调用，即可 （官方推荐使用第二种）
   */
    // 例：第一种方式写在 computed 中
    getScheduleTypeEnum () {
      return this.$store.state.moduleA.scheduleTypeEnum
    },

    //注意： 按功能进行模块划分后，如下方法行不通，输出为 undefined
    //     XXXX  此方法错误   XXXX
    // error :  ...mapState(["scheduleTypeEnum"]),

    // 需采用此  开启了 namespaced命名空间后的  方法 （官方建议mapState写到计算属性中，让代码显得优雅）
    ...mapState("moduleA", ['scheduleTypeEnum', "personOne", "productsNum"]),



    /*  2.  getters -- 应用
    调用 store 仓库中 getters 中 封装的 方法
      第一种方式：
     直接通过 this.$store.getters 调用   例：this.$store.getters["moduleA/changePersonOne"]

     第二种方式：
     引入vuex的mapGetters方法，再把相关的getters解构到methods中，用this直接调用，即可 （官方推荐使用第二种）
    */
    // 例：第一种方式写在 computed 中
    changePersonOne1 () {
      return this.$store.getters["moduleA/changePersonOne"]
    },
    // 解构 总store 中 moduleA里的getters方法
    ...mapGetters("moduleA", ['changePersonOne']),
  },
  created () { },
  mounted () {
    // state
    this.state_personOne = this.personOne
    this.state_productsNum = this.productsNum
    console.log(this.getScheduleTypeEnum, "state -- getScheduleTypeEnum")
    console.log(this.scheduleTypeEnum, "state -- scheduleTypeEnum")
    // getters
    console.log(this.changePersonOne1, "getters -- changePersonOne1")
    console.log(this.changePersonOne, "getters -- changePersonOne")

    /*  4.  actions -- 应用
    调用 store 仓库中 actions 中 封装的 异步方法
     第一种方式：
     直接通过 this.$store.dispatch 调用   例：this.$store.dispatch('getUserInfo')

     第二种方式：
     引入vuex的mapActions方法，再把相关的actions解构到methods中，用this直接调用，即可 （官方推荐使用第二种） 
    */
    this.$store.dispatch('moduleA/getUserInfo')
    this.getUserInfo()
  },
  methods: {
    // 解构 总store 中 moduleA里的异步方法
    ...mapActions("moduleA", ["getUserInfo"]),

    /* 3.  mutation -- 应用
      调用 store 仓库中 actions 中封装的 同步方法
      第一种方式：(官方建议  传值修改时，传入一个对象，让代码看起来更美观)
      直接通过this.$store。commit 调用    例：
      固值修改方法调用：  this.$store.commit("moduleA/changeProductsNum")
      传值修改方法调用：  this.$store.commit("moduleA/changePersonOneName",{newName:"Li Si"})
  
    */
    // 解构 总store 中 moduleA里面的同步方法
    ...mapMutations("moduleA", ["changePersonOneName", "changeProductsNum"]),
    change_state_personOne () {
      // 直接调用 mutations 同步方法
      // this.$store.commit("moduleA/changePersonOneName", { newName: "Li Si" })
      // this.state_personOne = this.personOne
      // 解构调用 mutations 同步方法
      this.changePersonOneName({ newName: "Li Si" })
      // 再把 state 中更改过后的值 赋给当前页面 data 中的数据
      this.state_personOne = this.personOne
    },
    change_state_productsNum () {
      // 直接调用 mutations 同步方法
      // this.$store.commit("moduleA/changeProductsNum")
      // this.state_productsNum = this.productsNum

      // 解构调用 mutations 同步方法
      this.changeProductsNum()
      this.state_productsNum = this.productsNum
    }

  }
}
</script>

<template>
  <div class="page-vuexUsed">
    <div>{{scheduleTypeEnum}}</div>
    <ul>
      <li>state.personOne:{{state_personOne}}</li>
      <li>state.personOne:{{state_productsNum}}</li>
      <li>
        <button @click="change_state_personOne">change_state_personOne</button>
        <button @click="change_state_productsNum" style="margin-left:50px">change_state_productsNum</button>
      </li>
    </ul>
  </div>
</template>

<style lang="less" scoped>
.page-vuexUsed {
}
</style>
张叫兽²⁷
关注
专栏目录
VUE3 插件的开发和使用
m0_49515138的博客
02-07 5547
传统的 Webpack 可以用来构建 npm 包文件，但按照目前更主流的技术选项，编译结果更干净更迷的当属 Rollup ，但 Rollup 需要配置很多插件功能，这对于刚接触包开发的开发者来说学习成本比较高，而 Vite 的出现则解决了这个难题，因为 Vite 的底层是基于 Rollup 来完成构建，上层则简化了很多配置上的问题，因此接下来将使用 Vite 来带领开发者入门 npm 包的开发。的新声明 (.d.ts) 文件 ts(7016)
Vue项目知识点总结，包含基础，Vue2实践揭秘
qq_45163356的博客
08-30 460
第一章：例说Vue.js $ npm i vue-cli -g 首先，在组件脚本定义中使用data定义用于内部访问的数据模型： export default { ... data () { return { title: "vue-todos" } } } data可以是一个返回Object对象的函数，也可以是一个对象属性，也就是说，可以写成以下的方式： export de
Vuex参考手册.zip
08-06
Vuex参考手册
vuex 使用说明
@tangguo123 博客
06-18 236
安装、使用vuex vue.js 2.0 开发环境下安装vuex： yarn add vuex --save 在项目src目录下新增一个store文件夹，在该文件夹内新建index.js文件和modules文件夹。目录结构如下： 文件说明： mutations-type.js：定义所有的mutations名称 export const APP_SET_TITLE = 'APP_SET_TITLE' export const USER_SET_TOKEN = 'USER_SET_TOKEN' ap
vuex的详细使用说明
黄小堆
05-04 134
首先要安装、使用 vuex 首先在 vue 2.0+ 你的vue-cli项目中安装 vuex : npminstallvuex--save 在 main.js里面引入store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用this.$store了： import store from './store'//引入store new Vue({ el: '#app'...
VueX的详细使用讲解
zayyo的博客
11-15 4177
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能 State：就是我们的状态，类似data中的属性 View：视图层，可以针对State的变化，显示不同的信息 Actions：这里的Actions主要是
vuex的使用方法
bamboozjy的博客
07-31 974
1.安装依赖  npm i vuex -D 2.在src下新建store文件夹，并此文件夹下新建store.js，文件内容为： import Vue from "vue"; import Vuex from "vuex"; Vue.use(Vuex); var store = new Vuex.Store({ state: { arr: [], msg: "bamb...
uni-app 常用的页面间通讯方式
前端博客典中典
12-08 822
uni-app 是一个使用 vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 一、利用url传参进行通讯 A页面向B页面传递参数 uni.navigateTo({ url: 'test/test?id=1&url=' + encodeURIComponent('https://dcloud.io') }); B页面接收A页面传递的参数
前端2020面试题195道
热门推荐
weijieyuhyt的博客
01-13 1万+
HTML5面试题 一、 Doctype的作用? 严格模式和混杂模式的区分，以及如何触发这2种模式? <!DOCTYPE> 声明位于文档中的最前面，处于 标签之前。告知浏览器的解析器，用什么文档类型 规范来解析这个文档。 DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。 严格模式就是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法， 混杂模式...
（建议收藏）Vue3 对比 Vue2.x 差异性、注意点、整体梳理，与React hook比又如何？（面试热点）
@baby张~的博客
11-06 1176
前言 前不久Vue3的RC版本终于发布，一直没时间研究，这篇文章我将以下面的结构，为大家整体梳理下Vue3，顺便对比下vue2.x和react hook结合着带大家看看，可能有些长，耐心看完相信会有收获（面试热点）。 文章目录前言一、为什么重写vue2.X?1.1背景1.2尤雨溪的回答是两个关键因素：二、Vue2.x 到 Vue3 详细对比2.1 生命周期的变化2.2- 使用proxy代替defineProperty2.2.1- Object.defineProperty()语法2.2.2- Proxy的
Vuex详解，一文读懂并使用Vuex
最新发布
万维网连五洲，二进制写尽天下事，喜欢结识新伙伴寻找志同道合的朋友，欢迎一起探讨学习
10-01 1万+
如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
VueX常用配置与使用方法
hi修修的博客
03-30 7294
Vuex的一些常用配置与使用方法
Vuex使用详解、简单实现一个Vuex
qq_45859670的博客
03-09 932
应用层级的状态应该集中到单个 store 对象中。 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。 异步逻辑都应该封装到 action 里面。
vuex使用
jomes_wang的博客
06-13 3612
1. vuex简介vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。了解vue的同学应该是明白data是怎么回事的吧，如果不懂的话，建议先学完vue的基础知识再看vuex。 2. vuex的组成结构示意图vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味...
Vuex使用方法详解
weixin_44520088的博客
03-10 2576
Vuex 定义 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 什么是“状态管理模式” new Vue({ // state data () { return { count: 0 } }, // view template: ` <div>{{ count }}</div> `, // actions me
vue设置全局背景图_vue开发使用笔记
weixin_39629780的博客
11-21 1989
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理，个人的理解是全局状态管理更合适；简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。下面咱们一步一步地剖析下vuex的使用:首先要安装、使用 vuex首先在 vue 2.0+ 你的vue-cli项目中安装 vuex :n...
什么是vuex
夏天的博客
03-16 225
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。
Vuex(仓库)的安装及简单使用
天命爱心职责的博客
01-25 2472
state:存储在 Vuex 中的数据和 Vue 实例中的data遵循相同的规则. getters:Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。 mutations:更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutat
vuex 状态管理模式 + 库（大仓库与小仓库）
Drizzlejj的博客
06-21 608
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。但需要管理的状态实在太多，全部堆放在一个 state 中，在使用的还是不便，这个 时候我们可以在 store 中创建多个模块。本例中 拥有两个组件 Home 与 Search在 store 文件中新建 Home 文件夹 与 Search
super-vuex简化Vuex开发：使用体验与优势解析
"这篇文章主要介绍了使用super-vuex的心得体验，它是一个旨在简化Vuex数据管理的框架，尤其适用于中后台项目的全局数据共享、组件解耦和数据接口分离。super-vuex在保留Vuex核心功能的基础上，优化了mutation和...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值