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 = 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的更多相关文章
- VUE - vuex state的使用
1,安装 进入项目目录,执行 vue add vuex 命令 2,会在src的目录下新增store文件夹 3,打开store文件夹下的index.js , 给 state 设定一些数据 impor ...
- [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 ...
- 在vuex的mutations中使用vue的小技巧
问题: 在vuex组件中的mutations属性中的定义的函数,有时会要用到vue这个对象.正常在其他的地方使用是通过this这个变量来获取,但是在mutations定义的函数中this指定的是Vue ...
- vue自学入门-5(vuex state)
vue自学入门-1(Windows下搭建vue环境) vue自学入门-2(vue创建项目) vue自学入门-3(vue第一个例子) vue自学入门-4(vue slot) vue自学入门-5(vuex ...
- vue 关于deep watch / computed 监听不到 vuex state 对象变化的的问题
简而言之,如果vuex state 中是一个对象 {},那么监听就会有问题.先给出解决方案: // 超简易拷贝(如果是深拷贝还多此一举把get/set拷贝进去了,所以用简易拷贝即可) let __VA ...
- vue+vuex初入门
Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 解决问题: 传参的方法对于多层嵌 ...
- use vue vuex vue-router, not use webpack
vue,vuex,vue-router放在一起能做什么?不用webpack之类的打包工具使用他们是否可行?各位道友在初学vue时是否有这样的困惑.因为现代构建前端项目的一般模式是: 安装webapck ...
- vue vuex的用法
1.引入 vue.js vuex.js 文件 2.创建Store文件 var sSatte=new Vuex.Store({ state:{}, mutations:{}, actions:{ ...
- Vuex state 状态浅解
对于Vuex中的state里面的理解总是有些欠缺,机制似乎理解了.但是还有很多的不足,在这就先浅谈下自己的理解. vuex 机制中,定义了全局Store,在各个vue组件面的this.$store指向 ...
随机推荐
- 安装并配置工具以使用iOS进行构建
Visual Studio 2015 Visual Studio文档的新家是docs.microsoft.com上的Visual Studio 2017文档 . 有关Visual Studio 2 ...
- mac book 华为C8815不能debug
最近遇到一个头疼的问题,华为c8815机器,死活不能在mac下debug,虽然最终是能够debug了,但是走了很多弯路. (1)以为是mac的系统问题,所以重装了系统.为了重装系统,备份资料,用快盘上 ...
- Java-Runoob:Java 基础语法
ylbtech-Java-Runoob:Java 基础语法 1.返回顶部 1. Java 基础语法 一个 Java 程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍 ...
- Spring缓存源码剖析:(二)CacheManager
一.CacheManager总览 如果需要Spring缓存可以正常工作,必须配置一个CacheManager. CacheManager实现类你可以配置Spring-context本身提供的Simpl ...
- 如何安装pip
1.安装python之后进入到python的安装目录,里面有个Scripts文件夹,打开文件夹里面有个easy_install.exe的文件 2.打开控制台,到easy_install.exe的文件地 ...
- linux 挂载硬盘
fdisk -l mkfs.ext4 /dev/vdb mkdir /data mount -t ext4 /dev/vdb /data 编辑/etc/fstab /dev/vdb /data ext ...
- windows 10 服务组件安装出现0x80070422错误解决方法
问题描述: windows 10通过控制面板->程序->启用或关闭Windows 功能安装Windows服务或组件时,出现0x80070422错误,提示服务禁止或未启用 问题产生原因: ...
- 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 ...
- Sublime Text 套件介紹:Pretty JSON
JSON,一個輕量級的資料交換語言,目前許多網站AJAX request的回應結果都是JSON格式 以下是一個標準的JSON格式 1 2 3 4 5 6 7 8 9 10 11 12 13 1 ...
- Checker Challenge跳棋的挑战(n皇后问题)
Description 检查一个如下的6 x 6的跳棋棋盘,有六个棋子被放置在棋盘上,使得每行,每列,每条对角线(包括两条主对角线的所有对角线)上都至多有一个棋子. 列号 0 1 2 3 4 5 6 ...