VUE - vuex state的使用

1,安装

进入项目目录,执行 vue add vuex 命令

2,会在src的目录下新增store文件夹

3,打开store文件夹下的index.js  ,  给 state 设定一些数据

import Vue from ‘vue‘

import Vuex from ‘vuex‘

Vue.use(Vuex)

export default new Vuex.Store({

state: {

count:0,

todos:[

{id:‘1‘, title:‘todoItem1‘,completed:false},

{id:‘2‘, title:‘todoItem2‘,completed:false},

{id:‘3‘, title:‘todoItem3‘,completed:false},

{id:‘4‘, title:‘todoItem4‘,completed:false},

{id:‘5‘, title:‘todoItem5‘,completed:false}

]

},

getters:{

},

mutations: {

},

actions: {

},

modules: {

}

})

 4, App.vue  来获取这些数据

<template>

<div id="app">

<p> {{count}} </p>        <!--  count为computed中注册的方法名  -- >

<p> {{todos}} </p>

</div>

</template>

<script>

export default {

name: ‘app‘,

computed: {

count(){

return this.$store.state.count   //获取 store中state的count

},

todos(){

return this.$store.state.todos

}

},

}

</script>

原文地址:https://www.cnblogs.com/500m/p/11785109.html

时间: 2024-08-29 22:28:43

VUE - vuex state的使用的相关文章

Vue Vuex state mutations

Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vuex中用于存储数据 var state = { count:1 } 4.mutations里放的是方法,主要用于改变state中的数据 var mutations = { incCount(){ ++state.count; } } 5.实例化vuex.Store consta store = ne

【mock.js】后端不来过夜半,闲敲mock落灯花 (附Vue + Vuex + mockjs的简单demo)

mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单的数据接口文档的赵师秀慨叹一声:"好吧,那还是我自己先模拟一下后端的接口吧" _(:3 」∠)_  再后来,就有了那句千古名句啦~~( 为了表示对赵师秀先生的歉意,文末我将附上原文)   如果我说这就是前后端分离思想和mock.js的由来,你会信么?(?´ω`?) mock的由来[真] 我们在Vu

vue+vuex+axios+echarts画一个动态更新的中国地图

一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save # 安装 ECharts npm install echarts --save 二. 项目结构 ├── ind

vuejs学习——vue+vuex+vue-router项目搭建(一)

前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪个版本的时候,希望你都熟读了vue+vuex+vue-router的官方文档.下面我们就开始吧. Vue搭建 这里我假设我们的电脑都安装了nodejs,那么我现在开始吧. 我们先新建一个文件(VueProject),通过命令行的方式进入这个文件夹,现在假设我们进入了VueProject文件夹,接下来

vue+vuex实现 counter计数器

vue+vuex实现 counter计数器 框架搭建好过后输入npm run dev的时候不会直接打开浏览器,在config文件夹找到index.js文件夹 把autoOpenBrowser: false改为autoOpenBrowser: true,从新在命令行输入npm run dev,这是就会自动打开浏览器. 如图修改 现在做个简单的demo示例:counter(计数器) 一.文件夹与文件的创建 1.首先要在components文件夹下面创建counter的一个文件夹 2.然后在count

Vue+Vuex实现自动登录 升级版

Vue+Vuex实现自动登录 升级版 之前实现的版本在这里:Vue+Vuex实现自动登录 ? ??? 在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我们加入的Authorization,而且如果没有登录的话,直接访问主页会进入登录页面.但其实有好几个问题并没有解决: ? ??? 一.我们所加的Authorzation其实并不是从服务器传过来的,而是自己的测试:只要服务器传过来了200的响应状态码,我们就自己加上固定的Authorization ?

VUE—路由(七)vuex state

一.安装vuex 安装完后发现多了store.js文件 store.js相当于仓库,会把所有的数据写在state中 二.安装好后重新运行 三.在学员展示页面添加功能 1)在Student.vue中引入两个组件 2)在component中添加这两个组件 3)把两个组件里面的内容写好 4)在student.vue中使用组件 显示结果: 四.获取store中的数据 可以通过$store获取 数据池中: studentList中: 给button添加点击事件改变名字时,发现添加学生名字没变 原因是dat

vue中监听vuex state变化,亲测可用

import {mapGetters} from 'vuex' computed: { ...mapGetters([ 'showChip' ]) }, watch: { showChip(newVal) { this.chipInState = newVal } } //试了几种方案,只有这个起效果了,记录一下. 原文地址:https://www.cnblogs.com/changlun/p/12333718.html

vue+vuex构建单页应用

基本 构建工具: webpack 语言: ES6 分号:行首分号规则(行尾不加分好, [ , ( , / , + , - 开头时在行首加分号) 配套设施: webpack 全家桶, vue 全家桶 项目结构 基本目录结构 api :封装与后端接口交互的操作 common :放置一些 reset.css 之类的 components :组件 entry :项目入口文件 index.js,index.css,index.html filters :过滤器.注:虽然 vue2.0 已经基本废弃(只保留