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 = new Vuex.Store({
    state,
    mutations
  })
6.export default store;
7.组件A中引入store
import store from '../store.js'
8.注册
mounted(){},
store
9.
通过this.$store.state.count引用属性
通过this.$store.commit.('incCount'))引用方法

10.getters类似于计算属性,改变state里面的count数据的时候,触发getters里的方法,获取新的值
var getters = {
  computedCount : (state)=>{
    return state.count*2
  }
}

通过 this.$store.getters.computedCount调用

11.Action类似于mutation,不同在于Action提交的是mutation,而不是直接改变状态。Action可包含任意异步操作
var actions = {
  incMutationsCount(context){
    context.commit('incCount') /*执行mutations里的incCount方法*/
  }
}
通过this.$store.dispatch('incMutationsCount')调用

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); var state = {
count:
} const mutations = {
run(){
++state.count;
}
} const store = new Vuex.Store({
state,
mutations
}); export default store;
<template>
<div id="app">
<router-link to="/home">Home组件</router-link>
<router-link to="/news">News组件</router-link>
<hr>
<router-view></router-view>
</div>
</template> <script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script> <style lang="scss"> </style>
<template>
<div id="news">
News组件
{{this.$store.state.count}}
</div>
</template> <script>
import store from '../utils/store.js'
export default {
data() {
return{}
},
store
};
</script>
<template>
<div id="home">
Home组件
{{this.$store.state.count}}
<br>
<button @click="addstate()">添加state</button>
</div>
</template> <script>
import store from '../utils/store.js'
export default {
data() {
return{}
},
store,
methods:{
addstate(){
this.$store.commit('run')
}
}
};
</script>

Vue Vuex state mutations的更多相关文章

  1. VUE - vuex state的使用

    1,安装 进入项目目录,执行 vue add vuex 命令 2,会在src的目录下新增store文件夹 3,打开store文件夹下的index.js  ,  给 state 设定一些数据 impor ...

  2. [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js

    You commit changes to state in Vuex using defined mutations. You can easily access these state mutat ...

  3. 在vuex的mutations中使用vue的小技巧

    问题: 在vuex组件中的mutations属性中的定义的函数,有时会要用到vue这个对象.正常在其他的地方使用是通过this这个变量来获取,但是在mutations定义的函数中this指定的是Vue ...

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

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

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

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

  6. vue+vuex初入门

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

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

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

  8. vue vuex的用法

    1.引入  vue.js    vuex.js 文件 2.创建Store文件 var sSatte=new Vuex.Store({ state:{}, mutations:{}, actions:{ ...

  9. Vuex state 状态浅解

    对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...

随机推荐

  1. 安装并配置工具以使用iOS进行构建

    Visual Studio 2015   Visual Studio文档的新家是docs.microsoft.com上的Visual Studio 2017文档 . 有关Visual Studio 2 ...

  2. mac book 华为C8815不能debug

    最近遇到一个头疼的问题,华为c8815机器,死活不能在mac下debug,虽然最终是能够debug了,但是走了很多弯路. (1)以为是mac的系统问题,所以重装了系统.为了重装系统,备份资料,用快盘上 ...

  3. Java-Runoob:Java 基础语法

    ylbtech-Java-Runoob:Java 基础语法 1.返回顶部 1. Java 基础语法 一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍 ...

  4. Spring缓存源码剖析:(二)CacheManager

    一.CacheManager总览 如果需要Spring缓存可以正常工作,必须配置一个CacheManager. CacheManager实现类你可以配置Spring-context本身提供的Simpl ...

  5. 如何安装pip

    1.安装python之后进入到python的安装目录,里面有个Scripts文件夹,打开文件夹里面有个easy_install.exe的文件 2.打开控制台,到easy_install.exe的文件地 ...

  6. linux 挂载硬盘

    fdisk -l mkfs.ext4 /dev/vdb mkdir /data mount -t ext4 /dev/vdb /data 编辑/etc/fstab /dev/vdb /data ext ...

  7. windows 10 服务组件安装出现0x80070422错误解决方法

    问题描述:   windows 10通过控制面板->程序->启用或关闭Windows 功能安装Windows服务或组件时,出现0x80070422错误,提示服务禁止或未启用 问题产生原因: ...

  8. sql中left join on where区别剖析

    select from tb1 left join tb2 on tb1.xx=tb2.xx and tb2.xxxx=5 先筛选tb2.xxxx=5 再把tb1与筛选后的临时表进行左连接. sele ...

  9. Sublime Text 套件介紹:Pretty JSON

    JSON,一個輕量級的資料交換語言,目前許多網站AJAX request的回應結果都是JSON格式   以下是一個標準的JSON格式   1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...

  10. Checker Challenge跳棋的挑战(n皇后问题)

    Description 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行,每列,每条对角线(包括两条主对角线的所有对角线)上都至多有一个棋子. 列号 0 1 2 3 4 5 6 ...