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. python去除字符串中的特殊字符(爬虫存储数据时会遇到不能作为文件名的字符串)

    问题描述 今天在写爬虫爬取影评时,本来的思路把影评的标题作为文件名,将每个影评的详情内容写入到"标题.txt"文件中,直到我遇到了这个问题: 这时我突然意识到,文件名中有些字符是不 ...

  2. vagrant up启动centos7时出现"rsync" could not be found on your PATH. Make sure that rsyncis properly ins

    (1)问题1:"rsync" could not be found on your PATH. Make sure that rsyncis properly ins 解决方法: ...

  3. selenium 获取table数据

    public class Table { /** * @param args */ public static void main(String[] args) { // TODO Auto-gene ...

  4. mybatis 查询标签

    语法 参考:http://www.mybatis.org/mybatis-3/zh/dynamic-sql.html <![CDATA[内容]]>: 参考: http://blog.csd ...

  5. STM32的程序升级

    IAP基础参考http://www.eeworld.com.cn/mcu/2018/ic-news112042038.html https://blog.csdn.net/tq384998430/ar ...

  6. Codeforces Round #579 (Div. 3)D(字符串,思维)

    #include<bits/stdc++.h>using namespace std;char s[200007],t[200007];int last[200007][27],nxt[2 ...

  7. Uber为何会成为共享经济中全球市值最大的独角兽企业?

    自5月10日登陆纽交所以来,Uber的股价就像过山车一般起起伏伏,让无数投资者痛并快乐着.不过在经过半个月时间的试探后,如今Uber的股价已经稳定在40美元左右.截至美国东部时间5月24日股市收盘,U ...

  8. SRS命令

    下载源码: git clone https://github.com/ossrs/srs.git 编译: cd srs/trunk ./configure && make 开启服务: ...

  9. 【快学springboot】9.使用 @Transactional 注解配置事务管理

    介绍 springboot对数据库事务的使用非常的方便,只需要在方法上添加@Transactional注解即可.Spring 为事务管理提供了丰富的功能支持.Spring 事务管理分为编程式和声明式的 ...

  10. leetcode刷题-- 3.二分查找

    二分查找 正常实现 题解 public int binarySearch(int[] nums, int key) { int l = 0, h = nums.length - 1; while (l ...