vuex的用法（含vue-cli的安装与使用）

最新推荐文章于 2024-12-09 07:32:09 发布

原创最新推荐文章于 2024-12-09 07:32:09 发布 · 476 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue

vue 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了Vuex作为Vue.js的状态管理模式如何帮助开发者解决组件间数据共享的问题，并概述了Vue-CLI的作用及其常用模板，包括如何通过Vue-CLI快速搭建项目结构。

1.什么是vuex？
vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。
2.什么是vue-cli？
脚手架:
vue-cli ：vue脚手架
帮你提供好基本项目结构

本身集成很多项目模板:
simple 基本没用
webpack 可以使用(大型项目)
Eslint 检查代码规范，
单元测试
webpack-simple 个人推荐使用, 没有代码检查 √
3.vue-cli 基本使用流程

基本使用流程:

安装 node.js(npm)，因为会用到npm包管理工具下载项目依赖等
npm install vue-cli - g 安装 vue命令环境验证安装ok? vue --version
生成项目模板 vue init <模板名> 本地文件夹名称
进入到生成目录里面 cd xxx npm install
npm run dev 运行这里是引用

4.引入
在这里插入图片描述

5.实例应用
文件路径：assets 新建js文件夹新建data.js文件
创建：

//必须引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

// 放置的是公共数据
export default new Vuex.Store({
    // state存储数据，类似于之前的data
    state:{
        count:0,
        address:'广州'

    },
    // mutations类似于之前的methods，专门用来修改数据
    mutations:{
        // 第一个参数是必须的 state  第二个参数可选(可以任意传递)
        add(state,n){
            state.count=state.count+n
        },
        caddress(state,n){
            state.address=n;
        }
    }
})

调用：在这里插入图片描述
更改数据：
这里更改数据，其他组件使用的vuex也会改变！！！

<template >
    <main>
        <h1 @click="change()">这是电影内容{{this.$store.state.count}}</h1>
        <p>您当前所在的位置{{this.$store.state.address}}</p>
    </main>
</template>

<script>
    export default{
        methods:{
            change(){
                // 可以直接修改数据，不建议，最好公共仓库修改
                // this.$store.state.count++
                // 调用公共数据库方法
                this.$store.commit('add',2)
            }
        }
    }
</script>