vuex的简述

墨蓝 2022-06-17 04:56 188阅读 0赞

## 什么是vuex？ ##

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。它的核心是 store（仓库）。”store” 基本上就是一个容器，它包含着应用中大部分的状态(state)，改变 状态的唯一途径就是显式地提交(commit) mutations。(详细介绍见：[http://vuex.vuejs.org/zh-cn/][http_vuex.vuejs.org_zh-cn])

## 如何安装vuex？ ##

借助npm安装vuex，执行命令：npm install –save vuex  
该命令将vuex安装为依赖模块。

## 如何使用vuex? ##

以下是vuex的简单示例：

store.js文件：

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
    　 state:{
        　 count: 0
    　 },
    　 mutations:{
        　 CHANGE_COUNT: (state)=>state.count++
    　 },
    　 actions:{
        　 changeCount: ({commit})=>commit('CHANGE_COUNT')
    　 }
    })

index.vue文件：

<template> <div> <p>{ {$store.state.count}}</p> <p><input type="button" value="提交" @click="changeCount" /></p> </div> </template> <script> export default { methods: { changeCount(){ this.$store.commit('CHANGE_COUNT') } } } </script>

main.js文件：

import Vue from 'vue'
    import Router from 'vue-router'
    import App from './index'
    import store from './store'
    
    Vue.use(Router);
    const routes = [
        {
          path: '/',
          name: 'App',
          component: App
        }
    ];
    new Vue({
      el: '#app',
      router: routes,
      store,
      template: '<App/>',
      components: { App }
    })

> 本文概念参照网址：[http://vuex.vuejs.org/zh-cn/][http_vuex.vuejs.org_zh-cn]

[http_vuex.vuejs.org_zh-cn]: http://vuex.vuejs.org/zh-cn/

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuex的使用，vuex实操（vuex的相关属性，vuex的五大核心属性）

⭐vuex简介: 是vue的状态管理工具（也可理解为一个仓库），用于存储公共数据，任何组件都可以使用vuex里的公共数据； ⭐vuex使用场景：如果需要构建是一个中大型

古城微笑少年丶/ 2023年10月03日 22:57/ 0 赞/ 106 阅读

相关 Vuex的使用

前言 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，本文示例是基于vue-cli4创建的vue2项目。简

痛定思痛。/ 2022年08月31日 04:53/ 0 赞/ 331 阅读

相关 vuex的简述

什么是vuex？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。它的核心是 store（仓库）。”store”

墨蓝/ 2022年06月17日 04:56/ 0 赞/ 189 阅读

相关 vuex的使用

VUE + vuex的使用总结如下（查阅资料）：写在前面本文旨在通过一个简单的例子，练习vuex的几个常用方法，使初学者以最快的速度跑起来一个vue + vue

冷不防/ 2022年05月24日 10:24/ 0 赞/ 346 阅读

相关 vuex的mutations

vuex 的严格模式strict: true下，不允许组件修改state中的值，若需要修改，在vuex的mutations属性中进行修改。注意：只能在mutations下的

一时失言乱红尘/ 2022年02月27日 08:36/ 0 赞/ 288 阅读

相关 vuex的使用

npm install vuex --save 可以在mian.js入口文件直接中引入，如果vuex处理的比较复杂化数据，最好在src目录下新建一个store文件引入

╰+攻爆jí腚メ/ 2022年02月01日 11:41/ 0 赞/ 450 阅读

相关 vuex—1vuex初始

1.vuex是什么 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

落日映苍穹つ/ 2022年01月21日 03:37/ 0 赞/ 374 阅读

相关 vuex的理解

vuex核心概念： 1.state :类似类中的变量，但其改变时，会触发更新相关dom。 2.Getter :类似类中的方法，值改变时自动改变。

不念不忘少年蓝@/ 2021年12月11日 02:27/ 0 赞/ 434 阅读

相关 Vuex的使用

(。^。) 来扯一扯Vuex呗~ Vuex：是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方

骑猪看日落/ 2021年11月09日 20:00/ 0 赞/ 433 阅读

相关 vuex的使用

vuex概念 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 vue安装 npm install vuex --save

一时失言乱红尘/ 2021年09月13日 15:56/ 0 赞/ 553 阅读