vue实战 ---- 社交媒体---黑马头条项目

洛小yuan

已于 2024-05-25 16:02:43 修改

阅读量836

点赞数 18

CC 4.0 BY-SA版权

文章标签： vue.js 媒体前端

于 2024-05-25 15:57:56 首次发布

本文链接：https://blog.youkuaiyun.com/2201_76041915/article/details/139137936

vue基础

1.介绍

为什么会有Vuex ?

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

vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。

结论

修改state状态必须通过mutations
mutations只能执行同步代码，类似ajax，定时器之类的代码不能在mutations中执行
执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
state的状态即共享数据可以在组件中引用
组件中可以调用action

2.初始化功能

建立一个新的脚手架项目, 在项目中应用vuex

vue create  demo

初始化：

第一步：npm i vuex --save => 安装到运行时依赖 => 项目上线之后依然使用的依赖 ,开发时依赖 => 开发调试时使用
遇到以下问题是因为发生了版本不兼容得问题，vue是2.7.16得版本应该下载vuex3得版本

开发时依赖就是开开发的时候，需要的依赖，运行时依赖，项目上线运行时依然需要的

第二步： 在main.js中 import Vuex from 'vuex'
第三步：在main.js中 Vue.use(Vuex) => 调用了 vuex中的一个install方法
第四步：const store = new Vuex.Store({...配置项})
第五步：在根实例配置 store 选项指向 store 实例对象

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.use(Vuex) //注册Vuex得功能 vue.use得方法实际上是调用了vuex中得一个install方法
const store = new Vuex.Store()  //实例化一个vuex
new Vue({
  render: h => h(App),
  store //Es6写法
}).$mount('#app')

3.state

state是放置所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在 state对象中

定义state

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.use(Vuex) //注册Vuex得功能 vue.use得方法实际上是调用了vuex中得一个install方法
const store = new Vuex.Store({
  // 实例化vuex得构造参数 state mutations actions
  state:{
    // 存储状态:
    count:0
  }
})  //实例化一个vuex
new Vue({
  render: h => h(App),
  store //Es6写法
}).$mount('#app')

如何在组件中获取count?

原始形式- 插值表达式

App.vue

组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count，如下:

<template>
  <div id="app">
    <!-- 原始形式应用 -->
    <div>原始形式获取state状态:{
  
  { $store.state.count }}</div>
  </div>
</template>

<script>
  export default {
    name:'App',
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

计算属性 - 将state属性定义在计算属性中

<template>
  <div id="app">
    <!-- 原始形式应用 -->
    <div>原始形式获取state状态:{
  
  { $store.state.count }}</div>
    <div>计算属性状态:{
  
  { count }}</div>
    <div>计算属性状态:{
  
  { count }}</div>
    <div>计算属性状态:{
  
  { count }}</div>
  </div>
</template>

<script>
  export default {
    name:'App',
    computed:{
      count(){
        // 来源于vuex
        return this.$store.state.count
      }
    }
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

辅助函数 - mapState

mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中, 它属于一种方便用法

<template>
  <div id="app">
    <!-- 原始形式应用 -->
    <div>原始形式获取state状态:{
  
  { $store.state.count }}</div>
    <div>计算属性状态:{
  
  { count }}</div>
    <div>计算属性状态:{
  
  { count }}</div>
    <div>计算属性状态:{
  
  { count }}</div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
  export default {
    name:'App',
    computed:{
      // count(){
      //   // 来源于vuex
      //   return this.$store.state.count
      // }
      ...mapState(['count'])
    }
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

4.mutations

state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照

数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步

定义mutation

<template>
  <div id="app">
    <!-- 原始形式应用 -->
    <div>原始形式获取state状态:{
  
  { $store.state.count }}</div>
    <div>计算属性状态:{
  
  { count }}</div>
    <div>计算属性状态:{
  
  { count }}</div>
    <div>计算属性状态:{
  
  { count }}</div>
    <!-- <ChildA /> -->
    <child-a />
  </div>
</template>

<script>
import {mapState} from 'vuex'
import ChildA from './components/child-a.vue'
  export default {
    components:{
      ChildA
    },
    name:'App',
    computed:{
      // count(){
      //   // 来源于vuex
      //   return this.$store.state.count
      // }
      ...mapState(['count'])
    }
  }
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

原始形式-$store

新建组件child-a.vue，内容为一个button按钮，点击按钮调用mutations

<template>
    <button @click="addCount">+1</button>
</template>

<script>
export default {
    methods: {
        //   调用方法
        addCount() {
            // 调用store中的mutations 提交给muations
            // commit('muations名称', 2)
            this.$store.commit('addCount', 10)  // 直接调用mutations
        }
    }
}
</script>

带参数的传递

child-a.vue

<template>
    <button @click="addCount">+1(原始形式)</button>
</template>

<script>
export default {
    methods: {
        // 原始形式得调用
        //   调用方法
        addCount() {
            // 调用store中的mutations 提交给muations
            // commit('muations名称', 2)
            // 给mutation传值
            // commit得第二个参数就是要传递得载荷payload
            this.$store.commit('addCount', 10)  // 直接调用mutations
        }
    }
}
</script>

main.js

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.use(Vuex) //注册Vuex得功能 vue.use得方法实际上是调用了vuex中得一个install方法
const store = new Vuex.Store({
  // 实例化vuex得构造参数 state mutations actions
  state:{
    // 存储状态:
    count:0
  },
  // 修改stat