小白入门Vuex
发布日期:2022-02-17 02:39:46 浏览次数:20 分类:技术文章

本文共 1479 字,大约阅读时间需要 4 分钟。

Vuex

Vuex是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。(简单理解就是多个组件需要访问的数据存放在这里面统一管理

为什么用Vuex

# 说明
原因 可以看到,根组件的data这个数据对A、B组件来说有多么麻烦了吧,一层一层往下传,又一层一层往上传;因此如果有个地方存放着这个data,各组件直接从里面获取或者设置不就好了吗?Vuex就有这个作用。
解决办法 有了Vuex,A可直接通过Getter获取到数据,B也可直接通过Mutation设置数据,就很方便啦。

Vuex使用

  • 首先是搭建vue项目–>vue init webpack vuex_demo。

init

  • 看一下项目是否搭建成功–>cd vuex_demo;npm run dev。

运行成功

  • 引入vuex,输入npm/cnpm install vuex --save 在package.json中看到vuex则证明安装成功。

在这里插入图片描述

  • 在src下新建store文件夹,并在其里新建store.js文件。
// 1.引入import Vue from 'vue'import Vuex from 'vuex'// 2.使用Vue.use(Vuex)// 3.创建store对象并导出export const store = new Vuex.Store({
state: {
Token: 'abc' }, getters: {
// 获取token GET_TOKEN: (state) => {
return state.Token } }, mutations: {
// 设置token SET_TOKEN: (state, token) => {
state.Token = token } }, actions: {
// context类似于this.store login: (context, token) => {
context.commit('SET_TOKEN', token) } }})
  • 在main.js里引入store并添加到vue实例中。
// 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'// 4.main.js引入store,并添加到vue上 就可以通过this.$store访问import {
store} from './store/store'Vue.config.productionTip = false/* eslint-disable no-new */new Vue({
el: '#app', store, components: {
App }, template: '
'})
  • 在Helloworld.vue添加下面代码,具体见注释。
  • 运行结果。
    结果

转载地址:https://blog.csdn.net/qq_39811414/article/details/107143827 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:Windows安装SSH连接远程服务器以及文件下载
下一篇:【最新】小白通过nginx部署vue项目到CentOS

发表评论

最新留言

感谢大佬
[***.8.128.20]2023年05月27日 10时11分23秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章