使用Vuex实现数据共享

川长思鸟来 2023-08-17 16:27 124阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWd5MjE4_size_16_color_FFFFFF_t_70]

> Vuex是什么？

官方定义

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

个人理解

*  所有组件的数据的静态数据区（类似于Java类的静态属性，组件好比 类的实例）

Vuex的组成（瞅上图）

*  State——数据仓库
 *  getter——用来获取数据
 *  Mutation——用来修改数据
 *  Action——用来提交mutation

> Vuex做什么？

*  多个视图或组件的同一数据共享（Java的static）
 *  大中型应用

Vue的组件的数据传递

> Vuex怎么用？

步骤

*  安装vuex包：

npm install vuex

*  创建vuex实例：

new Vuex.store()`在这里插入代码片`

*  main.js中将vuex实例挂载到vue对象上

实例demo

*  state中创建count字段
 *  mutations中创建一个count++的mutation
 *  button新增click事件mutation改变count  
    main.js

// The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    /* eslint-disable no-new */
    const store = new Vuex.Store({
      state: {
          count: 0
      },
      mutations: {
        countIncrease(state){
          state.count++
        }
      }
    })
    
    new Vue({
      store,
      render: h => h(App)
    }).$mount('#app')

App.vue

<template>
      <div id="app">
        
        {
       { count }}
        <button @click="clickMe">点我自增</button>
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld'
    
    export default {
      name: 'App',
      components: {
        HelloWorld
      },
      computed: {
        count() {
          return this.$store.state.count;
        }
      },
      methods: {
        clickMe() {
          this.$store.commit('countIncrease');
        }
      }
    }
    </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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZWd5MjE4_size_16_color_FFFFFF_t_70]: /images/20230810/f47596f3fdfc4ad381cd8d33972213ad.png