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>

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

  1. Vue Vuex state mutations

    Vuex 解决不同组件的数据共享,与数据持久化 1.npm install vuex --save 2.新建store.js 并引入vue vuex ,Vue.use(Vuex) 3.state在vu ...

  2. vue自学入门-5(vuex state)

    vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...

  3. vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题

    简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题.先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VA ...

  4. vue+vuex初入门

    Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 解决问题: 传参的方法对于多层嵌 ...

  5. use vue vuex vue-router, not use webpack

    vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...

  6. vue+vuex 回退定位到初始位置

    先放出两张图(没错,你还在9012,做为一名资深设计师我唯一的技能点就是留白),简单说明下问题未做回退定位(从落地页回退,每次都回到A位置)想死啊有木有,每次都需要手动重新定位来选择,你大哥看到你做个 ...

  7. 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面

    一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...

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

    一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china- ...

  9. vuejs学习——vue+vuex+vue-router项目搭建(三)

    前言 vuejs学习——vue+vuex+vue-router项目搭建(一) vuejs学习——vue+vuex+vue-router项目搭建(二) 为什么用vuex:组件之间的作用域独立,而组件之间 ...

随机推荐

  1. 【降维】主成分分析PCA推导

    本博客根据 百面机器学习,算法工程师带你去面试 一书总结归纳,公式都是出自该书. 本博客仅为个人总结学习,非商业用途,侵删. 网址 http://www.ptpress.com.cn 目录: PCA最 ...

  2. php 基础 语句include和require的区别是什么?为避免多次包含同一文件,可用(?)语句代替它们?

    require->require是无条件包含也就是如果一个流程里加入require,无论条件成立与否都会先执行 require include->include有返回值,而require没 ...

  3. android 支持上拉加载,下拉刷新的列表控件SwipeRefreshLayout的二次封装

    上拉加载,下拉刷新的列表控件,大家一定都封装过,或者使用过 源代码,我会在最后贴出来 这篇代码主要是为了解决两个问题 1.滑动冲突得问题 2.listview无数据时,无数据布局的展示问题 下方列出的 ...

  4. crm系统和e_store商场的比较总结

    e_store用了:Java.Servlet.JSP.Oracle.JQuery.Mybatis,tomcat技术 crm用了 :Java.JSP.Oracle.JQuery,Mybatis,spri ...

  5. Mybatis的逆向工程以及Example的实例函数及详解

    Mybatis-generator是Mybatis的逆向工程  (根据数据库中的表生成java代码) Mybatis的逆向工程会生成实例及实例对应的example,example用于添加条件,相当于w ...

  6. Kali Linux RPi0w Nexmon操作笔记

    Kali Linux RPi0w Nexmon镜像下载地址:https://www.offensive-security.com/kali-linux-arm-images/ 1.烧录系统 可参考:树 ...

  7. 第一次试水bof

    BOF come from https://www.jarvisoj.com/challenges nc pwn2.jarvisoj.com 9881(远程连接) 在ubuntu16.04上进行连接, ...

  8. java获取指定月份有几个星期x,获取指定月份跨了多少个星期

    例如获取2020年5月一共有多少个星期二,一共跨了多少个星期 public class MainTest { public static void main(String[] args) throws ...

  9. 树莓派4B踩坑指南 - (3)无显示器连接

    无显示器连接 WiFi:如果是原装系统,直接修改wpa_supplicant.conf文件后,放入boot即可(一定注意ssid名称不要写错!!惨痛教训T^T) SSH:在boot盘下新建一个 SSH ...

  10. ORACLE A表字段更改为B表的字段

    UPDATE IM_PARA_CHECK_DATA_NEW A SET (OPERASTATE, COVER_TYPE, COVER_PRO, WORK_BAND, DEVICE_TYPE) =(SE ...