一篇文章学懂Vuex

news/2025/2/25 13:39:05

一、基于VueCli自定义创建项目

233

344

二、Vuex 初始准备

建项目的时候把vuex勾选上就不用再yarn add vuex@3了

store/index.js

javascript">// 这里面存放的就是vuex相关的核心代码
import Vuex from 'vuex'
import Vue from 'vue'

// 插件安装
Vue.use(Vuex)

// 创建仓库（空仓库）
const store = new Vuex.Store()

// 到处给main.js使用
export default store

App.vue

javascript">  created () {
    // console.log(this.$router) // 没配
    console.log(this.$store) // 没配
  },

main.js

javascript">import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'
console.log(store.state.count)

Vue.config.productionTip = false

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

三、通过vuex仓库访问数据

（1）通过store直接访问

 新建仓库数据，这样别的模块、组件都可以访问到仓库中的数据。

javascript">// 创建仓库（空仓库）
const store = new Vuex.Store({
  // 通过state可以提供数据，所有组件共享的数据
  state: {
    title: '大标题',
    count: 100
  }
}
)

例如，App.vue中的模块中（指的是template中）

javascript">    <h1>根组件
      --{{ $store.state.title }}
      --{{ $store.state.count }}
    </h1>

App.vue中的组件中（指的是script中） 

javascript">  created () {
    console.log(this.$store.state.count) // 没配
  },

Son.vue（模块template中） 

javascript">    从vuex中获取的值: <label>{{ $store.state.count }}</label>

main.js(js中)

javascript">console.log(store.state.count)

总结：只需要在App.vue中写好仓库，后面可以直接通过底层的逻辑去调用，即：

模板中：｛｛$store.state.xxx ｝｝
组件逻辑中：this.$store.state.xxx
JS模块中：store.state.xxx

Son1.vue

javascript"><template>
  <div class="box">
    <h2>Son1 子组件 {{ $store.state.title }}</h2>
    从vuex中获取的值: <label>{{ $store.state.count }}</label>
    <br>
    <button>值 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son1Com'
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

（2）通过辅助函数（简化）

mapState是辅助函数，帮助我们把store中的数据自动映射到组件的计算属性中

 App.vue

//展示一下 不用

javascript">import { mapState } from 'vuex'
console.log(mapState(['count', 'title']))

在App.vue中这么写，就可以直接调用使用里面的值

javascript"><template>
  <div id="app">
    <h1>根组件
      --{{ title }}
      --{{ count }}
    </h1>
    <input type="text">
    <Son1></Son1>
    <hr>
    <Son2></Son2>
  </div>
</template>

  computed: {
    ...mapState(['count', 'title'])
  },

Son2.vue，虽然写起来简单还是需要再写一遍解构函数，即  computed: {
    ...mapState(['count', 'title'])
  }

javascript"><template>
  <div class="box">
    <h2>Son2 子组件 {{ title }}</h2>
    从vuex中获取的值:<label>{{ count }}</label>
    <br />
    <button>值 - 1</button>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Son2Com',
  computed: {
    ...mapState(['count', 'title'])
  }
}
</script>

<style lang="css" scoped>
.box {
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

四、组件修改仓库中的数据

（1）错误情况

javascript"><template>
  <div class="box">
    <h2>Son1 子组件 {{ $store.state.title }}</h2>
    从vuex中获取的值: <label>{{ $store.state.count }}</label>
    <br>
    <button @click="handleAdd">值 + 1</button>
  </div>
</template>

<script>
export default {
  name: 'Son1Com',
  methods: {
    handleAdd () {
      // 错误代码，不会报错，并且可以实现，但其实是错的 （但是vue不会监测 监测需要成本）
      // this.$store.state.count++
      // console.log(this.$store.state.count)

      // 应该通过mutation 核心概念 进行修改
    }
  }
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

（2）严格模式 strict:true

为了避免这种情况，方便初学者检查，我们采用严格模式。store/index.js中操作

javascript">// 这里面存放的就是vuex相关的核心代码
import Vuex from 'vuex'
import Vue from 'vue'

// 插件安装
Vue.use(Vuex)

// 创建仓库（空仓库）
const store = new Vuex.Store({
  // 严格模式（有利于初学者，检测不规范的代码 => 上线时需要关闭）
  // 其实还是可以修改，只是会提示报错
  strict: true,
  // 通过state可以提供数据，所有组件共享的数据
  state: {
    title: '大标题',
    count: 100
  }
}
)

// 到处给main.js使用
export default store

（3）修改数据-mutations

 store/index.js

javascript">// 这里面存放的就是vuex相关的核心代码
import Vuex from 'vuex'
import Vue from 'vue'

// 插件安装
Vue.use(Vuex)

// 创建仓库（空仓库）
const store = new Vuex.Store({
  // 严格模式（有利于初学者，检测不规范的代码 => 上线时需要关闭）
  // 其实还是可以修改，只是会提示报错
  strict: true,
  // 1.通过state可以提供数据，所有组件共享的数据
  state: {
    title: '大标题',
    count: 100
  },

  // 2.通过mutations可以提供修改数据的方法，mutation是一个对象
  mutations: {
    //   所有的mutation函数，第一个参数，都是state
    addCount (state) {
      //   修改数据
      state.count += 1
    },
    addFive (state) {
      //   修改数据
      state.count += 5
    },
    changeTitle (state) {
      state.title = '小标题'
    }
  }

}
)

// 到处给main.js使用
export default store

Son1.vue

javascript"><template>
  <div class="box">
    <h2>Son1 子组件 {{ $store.state.title }}</h2>
    从vuex中获取的值: <label>{{ $store.state.count }}</label>
    <br>
    <button @click="handleAdd">值 + 1</button>
    <button @click="addFive">值 + 5</button>
    <button @click="changeFn">改标题</button>

  </div>
</template>

<script>
export default {
  name: 'Son1Com',
  methods: {
    handleAdd () {
      // 错误代码，不会报错，并且可以实现，但其实是错的 （但是vue不会监测 监测需要成本）
      // this.$store.state.count++
      // console.log(this.$store.state.count)

      // 应该通过mutation 核心概念 进行修改数据
      // 需要提交调用mutation
      this.$store.commit('addCount')
    },
    addFive () {
      this.$store.commit('addFive')
    },
    changeFn () {
      this.$store.commit('changeTitle')
    }
  }
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

（4）mutations传参

index.js

javascript">  // 2.通过mutations可以提供修改数据的方法，mutation是一个对象
  mutations: {
    //   所有的mutation函数，第一个参数，都是state
    // addCount (state) {
    //   //   修改数据
    //   state.count += 1
    // },
    addCount (state, n) {
      //   修改数据
      state.count += n
    },

    changeTitle (state, newTitle) {
      state.title = newTitle
    }
  }

Son.vue

javascript"><template>
  <div class="box">
    <h2>Son1 子组件 {{ $store.state.title }}</h2>
    从vuex中获取的值: <label>{{ $store.state.count }}</label>
    <br>
    <button @click="handleAdd(1)">值 + 1</button>
    <button @click="handleAdd(5)">值 + 5</button>
    <button @click="handleAdd(10)">值 + 10</button>
    <button @click="changeFn">改标题</button>

  </div>
</template>

<script>
export default {
  name: 'Son1Com',
  methods: {
    handleAdd (n) {
      // 错误代码，不会报错，并且可以实现，但其实是错的 （但是vue不会监测 监测需要成本）
      // this.$store.state.count++
      // console.log(this.$store.state.count)

      // 应该通过mutation 核心概念 进行修改数据
      // 需要提交调用mutation
      // this.$store.commit('addCount')
      this.$store.commit('addCount', n)
      console.log(n)
    },
    changeFn (newTitle) {
      this.$store.commit('changeTitle', '黑马程序员')
    }
  }
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

（5）mutations传多参

只能传递有且仅有一个参数，如果是想传递多个参数，可以写成对象数组的形式。

Son1.vue

javascript"><template>
  <div class="box">
    <h2>Son1 子组件 {{ $store.state.title }}</h2>
    从vuex中获取的值: <label>{{ $store.state.count }}</label>
    <br>
    <button @click="handleAdd(1)">值 + 1</button>
    <button @click="handleAdd(5)">值 + 5</button>
    <button @click="handleAdd(10)">值 + 10</button>
    <button @click="changeFn">改标题</button>

  </div>
</template>

<script>
export default {
  name: 'Son1Com',
  methods: {
    handleAdd (n) {
      // 错误代码，不会报错，并且可以实现，但其实是错的 （但是vue不会监测 监测需要成本）
      // this.$store.state.count++
      // console.log(this.$store.state.count)

      // 应该通过mutation 核心概念 进行修改数据
      // 需要提交调用mutation
      // this.$store.commit('addCount')
      // this.$store.commit('addCount', n)
      // 只能传递有且仅有一个参数，如果是想传递多个参数，可以写成对象数组的形式。
      this.$store.commit('addCount', {
        count: n,
        msg: '哈哈'
      })

      console.log(n)
    },
    changeFn (newTitle) {
      this.$store.commit('changeTitle', '黑马程序员')
    }

  }
}
</script>

<style lang="css" scoped>
.box{
  border: 3px solid #ccc;
  width: 400px;
  padding: 10px;
  margin: 20px;
}
h2 {
  margin-top: 10px;
}
</style>

index.js

javascript">  // 2.通过mutations可以提供修改数据的方法，mutation是一个对象
  mutations: {
    addCount (state, obj) {
      //   修改数据
      state.count += obj.count
    }
}
)

 （6）实时输入，实时更新

不能用:value 因为不能直接改变仓库的值，但是:value是由:value和@input组成，所以可以分开用


http://www.niftyadmin.cn/n/5865559.html

相关文章

PyVideoTrans：一款功能全面的视频翻译配音工具！

PyVideoTrans：一款功能全面的视频翻译配音工具！

PyVideoTrans是一款功能全面的视频翻译配音工具&#xff0c;专为视频内容创作者设计。它能够将视频中的语言翻译成另一种语言&#xff0c;并自动生成与之匹配的字幕和配音。支持多种语言&#xff0c;包括但不限于中文&#xff08;简繁体&#xff09;、英语、韩语、日语、俄语、…
阅读更多...
MySQL数据库连接池泄露导致MySQL Server超时关闭连接

MySQL数据库连接池泄露导致MySQL Server超时关闭连接

前言 最近做项目&#xff0c;发现老项目出现xxx&#xff0c;这个错误其实很简单&#xff0c;出现在MySQL数据库Server端对长时间没有使用的client连接执行清楚处理&#xff0c;因为是druid数据库&#xff0c;且在github也出现这样的issue&#xff1a;The last packet successf…
阅读更多...
拓扑排序的核心算法：BFS应用与实践

拓扑排序的核心算法：BFS应用与实践

目录 一、拓扑排序简介 二、BFS解决拓扑排序的步骤 三、C实现 四、代码解释 五、总结 一、拓扑排序简介 拓扑排序是对有向无环图&#xff08;DAG&#xff09;进行排序的一种方法&#xff0c;使得对于图中的每一条有向边 (u, v)&#xff0c;u 在排序中总是位于 v 的前面。拓…
阅读更多...
AIGC-LLAMA模型介绍

AIGC-LLAMA模型介绍

LLAMA模型介绍 LLAMA模型介绍LLAMA模型架构模型特点 训练数据代码示例 LLAMA模型介绍 LLAMA&#xff08;LLaMA, Large Language Model Meta AI&#xff09;是Meta&#xff08;前Facebook&#xff09;开发的一系列大型语言模型。LLAMA模型家族旨在提供高效、灵活的语言处理能力…
阅读更多...
Java Web框架篇之Spring

Java Web框架篇之Spring

Java Web系列文章汇总贴: Java Web知识总结汇总 为什么要有Spring(IoC) Web发展的几个阶段 &#xff08;1&#xff09;初级阶段&#xff1a;使用Model1(JSPJavaBean)/Model2(JspServletJavaBean)/三层模型(表示层(JSP/Servlet)业务逻辑层持久化层)进行开发&#xff1b;&#…
阅读更多...
服务器租用的价格受哪些因素影响？

服务器租用的价格受哪些因素影响？

1、 服务器配置 租用服务器配置的成本占租用服务器成本的关键部分。如果服务器配置完善、功能完善、臭名昭著&#xff0c;那么租赁价格肯定会高于所有其他级别的普通服务器。 2、 服务器防御 租用服务器的成本与其安全保护能力成正比。例如&#xff0c;移动游戏和金融易受DDoS和…
阅读更多...
归并排序 Listnode* vector＜int＞ vector＜ListNode*＞

归并排序 Listnode* vector＜int＞ vector＜ListNode*＞

加粗样式 ListNode* merge(ListNode* l1,ListNode* l2){ListNode* dummyheadnew ListNode(0);ListNode* curdummyhead;while(l1&&l2){if(l1->val>l2->val){cur->nextl2;l2l2->next;curcur->next;}else if(l1->val<l2->val){cur->nextl1…
阅读更多...
Megatron-LM：使用模型并行训练数十亿参数的语言模型

Megatron-LM：使用模型并行训练数十亿参数的语言模型

摘要 最近在语言建模方面的工作表明&#xff0c;训练大型Transformer模型能够推动自然语言处理应用的技术前沿。然而&#xff0c;由于内存限制&#xff0c;训练非常大的模型可能相当困难。在这项工作中&#xff0c;我们展示了训练极大Transformer模型的技术&#xff0c;并实现…
阅读更多...
最新文章

Copyright @ 2022~2023