vuex的简述

墨蓝 2022-06-17 04:56 139阅读 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 条评论，139人围观）

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

相关阅读

相关 Git的简述

Git 文章目录 Git Git概述版本控制工具集中式管理控制工具分步式管理控制工具

喜欢ヅ旅行/ 2024年03月26日 15:02/ 0 赞/ 52 阅读

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

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

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

相关 CSRF的简述

先从一个故事说起（故事纯属虚构，恶意模仿后果自负）：小谷最近遭遇电信诈骗被骗的倾家荡产，于是他想到了报复社会。在知乎上狂点800个没有帮助1000个举报后，他决定做点正事干

Myth丶恋晨/ 2022年11月09日 12:53/ 0 赞/ 147 阅读

相关 vuex的简述

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

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

相关 vuex的mutations

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

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

相关 vuex的使用

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

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

相关 vuex—1vuex初始

1.vuex是什么 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

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

相关 vuex的理解

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

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

相关 Vuex的使用

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

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

相关 vuex的使用

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

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