vuex概念及基本使用

最新推荐文章于 2023-02-28 18:54:24 发布

jwz934738949

最新推荐文章于 2023-02-28 18:54:24 发布

阅读量116

点赞数

分类专栏： Vue基础

本文链接：https://blog.csdn.net/jwz934738949/article/details/107897874

版权

Vue基础专栏收录该内容

59 篇文章 1 订阅

订阅专栏

vuex概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension
Vuex包含三种状态：state，驱动应用的数据源；view，以声明方式将 state 映射到视图；actions，响应在 view 上的用户输入导致的状态变化
如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择

单页面到多页面的状态管理切换

实现计数器的功能，点击+按钮，数字自动加1，点击-按钮，数字自动减1。而数字变量counter被定义在vuex中，方便任意组件使用该属性
首先在src目录中创建store文件夹，用来存放vuex相关文件，创建index.js文件，在其中使用vuex。注意在创建vuex实例时需要使用Store函数

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

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

// 2.创建对象
const store = new Vuex.Store({
  state: {
    counter: 0
  },
  mutations: {
    // 方法
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    }
  },
  actions: {},
  getters: {},
  modules: {}
})

// 3.导出store
export default store

其中state代表属性，其他组件可以使用state中的属性，mutations是方法，其他组件可以使用该方法来改变state中的属性
使用$store.state.属性名来调用vuex中具体的属性。对于mutations则使用$store.commit(‘mutations名称’)

<template>
  <div id="app">
    <h2>{{message}}</h2>
    <h2>{{$store.state.counter}}</h2>
    <button @click="add">+</button>
    <button @click="sub">-</button>
    <hello-vuex></hello-vuex>
  </div>
</template>

<script>
  import HelloVuex from "./components/HelloVuex";

  export default {
    name: 'App',
    data() {
      return {
        message: '欢迎来到Vue'
      }
    },
    methods: {
      add() {
        this.$store.commit('increment');
      },
      sub() {
        this.$store.commit('decrement');
      }
    },
    components: {
      HelloVuex
    }
  }
</script>

<style>

</style>