多个计数器在Vuex中的状态
安装
安装vue-cli npm i -g vue-cli
生成目录 vue init webpack
启动开发环境 npm run dev
启动命令
npm install -g vue-cli
vue init webpack project-vue
cd project-vue
npm run dev
vue-cli 单文件组件
使用组件三部曲:引入组件、注册组件、使用组件
引入组件:import Hello from ‘./components/hello’
注册组件: components: { Hello:Hello }
使用组件:
Vuex
1.集中式存储管理状态
2.一种可预测的方式发生变化
状态 组件内部转态: 仅在一个组件内使用的状态(data字段)
应用级别状态: 多个组件公用的状态
什么情况下使用Vuex
1.多个视图依赖于同一状态
2.来自不同视图的行为需要变更同一状态
安装Vuex
npm i vuex –save
在src文件夹下面创建stroe文件夹,
然后再store文件夹下面创建index,js文件,
在index.js引入组件
import Vue from 'vue'
import Vuex from 'vuex'
作为插件使用
Vue.use(Vuex)
然后main.js 里面注入根实例
注入根实例
{ store }
将store在组件中使用
在store文件夹的index.js定义一个状态
let store = new Vuex.Store({
//定义应用的单一状态书,用一个对象就包含了全部的应用层级转态
state: {
count: 110 //定义一个状态
}
})
在组件里面使用状态,有两种方法
<script>
export default {
//data 只能在本组件被改变
data() {
return {
n: this.$store.state.count //n的初始值从vuex的state中拿
}
}
}
</script>
或者
<p></p>
##更改状态
mutation (修改状态的唯一途径): 要使改变状态可被记录,必须要commit 一个 mutation ; mutation 必须是同步更新状态.
action (异步操作) : 异步操作产生结果 ; Action 提交的是 mutation ,而不是直接变更状态
mutation更改状态
在store中的index.js更改状态
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//定义store
//vuex中的状态是响应的
let store = new Vuex.Store({
state: {
count: 110 //定义一个状态
},
mutations: {
updatedCount(state, payload) { //改变state状态
state.count += payload.add;
}
}
})
export default store
commit 提交更改
<script>
export default {
methods: {
changeCount() 大专栏 多个计数器在Vuex中的状态ss="p">{
this.$store.commit('updatedCount',{
add: 30
})
}
}
}
</script>
//getter(派发的状态): 抽离操作转态的逻辑,可被多组件使用
getters : {
totals(state){
//reduce 数组的方法
//reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值,0表示和初始值为0.
return state.shopList.reduce((n,item) => n + item.count,0)
}
}
action (异步操作) : 异步操作产生结果; Action 提交的是mutation,而不是直接变更状态
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//mock数据
const shopList = [
{
id: 123,
count: 2,
},
{
id: 456,
count: 3
}
]
//定义store
//vuex中的状态是响应的
let store = new Vuex.Store({
//定义应用的单一状态书,用一个对象就包含了全部的应用层级转态
state: {
shopList //定义一个状态
},
//getter(派发的状态): 抽离操作转态的逻辑,可被多组件使用
getters : {
totals(state){
//reduce 数组的方法
//reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值,0表示和初始值为0.
return state.shopList.reduce((n,item) => n + item.count,0)
}
},
//要使改变状态可被记录,必须要commit一个mutation; mutation必须是同步更新转态.
mutations: {
//只要提交mutation就有记录,如果mutation中有异步操作,记录的还是之前的值
updatedCountById(state,payload) { //改变state状态
/*setTimeout(() => {
let item = state.shopList.find(item => item.id == payload.id)
item.count += 1;
},3000);*/
let item = state.shopList.find(item => item.id == payload.id);
item.count += 1;
},
reduceCountById(state,payload) {
let item = state.shopList.find(item => item.id == payload.id)
console.log(payload)
if(item.count <= 0 ){
alert('数量不能少于0');
return false;
}
item.count -=1;
}
},
actions: {
updateCountAction(store, parmas) {
//异步操作放在这里
setTimeout(() => {
store.commit('updatedCountById', parmas)
},1000)
}
}
})
export default store
vuex 使用原则
原则:
- 每个应用将仅仅包含一个store实例
- 更改store中的状态的唯一方法是提交mutation
- Mutation 必须是同步函数
- Action 可以包含任意异步操作
- Action 提交的是mutation,而不是直接更改状态
github地址: https://github.com/yyyyama/Vue-Project
多个计数器在Vuex中的状态的更多相关文章
- Vuex内容解析和vue cli项目中使用状态管理模式Vuex
中文文档:vuex官方中文网站 一.vuex里面都有些什么内容? const store = new Vuex.Store({ state: { name: 'weish', age: }, gett ...
- 在vue组件中使用vuex的state状态对象的5种方式
下面是store文件夹下的state.js和index.js内容 //state.js const state = { headerBgOpacity:0, loginStatus:0, count: ...
- vuex中store保存的数据,刷新页面会清空
用vuex,项目中需要记录一些状态,来判断页面是否为登录状态和页面是否可被编辑,此时用到了vuex中的store来存储一个状态. //首先 安装vuex npm install vuex --save ...
- 【vue】vue +element 搭建项目,vuex中的store使用
概述: 每一个 Vuex 应用的核心就是 store(仓库).“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state).Vuex 和单纯的全局对象有以下两点不同: Vuex 的 ...
- vuex 中五大核心以及map函数的应用
什么是vuex? 我理解的vuex就是数据和状态的管理 如果在模块化构建系统中,请确保在开头调用了 Vue.use(Vuex) 五大核心: const store = new Vuex.Store({ ...
- 转 理解vuex -- vue的状态管理模式
转自:https://segmentfault.com/a/1190000012015742 vuex是什么? 先引用vuex官网的话: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 ...
- vuex -- vue的状态管理模式
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 状态管理模式.集中式存储管理 一听就很高大 ...
- vue之mapMutaions的使用 && vuex中 action 用法示例 && api.js的使用
vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
- vuex中使用对象展开运算符
使用场景 当需要进行vuex进行数据状态管理的时候,会使用到mapGetters,mapState,还有自身的计算属性的时候,这个时候就会用到这个了! 1.首先需要安装 npm install bab ...
随机推荐
- GetCharWidth32
#include <windows.h> #include<stdio.h> // 窗口函数的函数原形 LRESULT CALLBACK MainWndProc(HWND, U ...
- MySql数据库,查询数据导出时会出现重复的记录(数据越多越明显)
在查询数据时,数据量多的时候,我们会使用分页功能. 每页显示多少数据. 这种情况下,一半看不出什么问题. 而导出数据时,有时就是通过分页的方法,逐步讲数据追加到导出文件中. 当全部数据都导出之后,就有 ...
- 简单的tab栏切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vim下看C++代码
看C++代码, 缺少合适的编辑器,捣鼓vim. 安装Vundle, 用于插件管理 git clone https://github.com/VundleVim/Vundle.vim.git ~/.vi ...
- 18)PHP,可变函数,匿名函数 变量的作用域
(1)可变函数: 可变函数,就是函数名“可变”——其实跟可变变量一样的道理. $str1 = “f1”; //只是一个字符串,内容为”f1” $v1 = $str1(3, 4); //形式上看 ...
- servlet 上传文件
java protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException ...
- linux 上安装 tomcat
准备条件:安装java 一.tomcat 的安装 #新建文件夹 mkdir -p /data/tomcat #下载 tomcat8 服务器 wget http://mirrors.tuna.tsing ...
- Mac中Apache常用命令
Apache常用命令记录,还是记一下吧,总是忘记. Apache常用命令: # sudo apachectl start // 启动Apache服务 # sudo apachectl stop // ...
- linux通过grep根据关键字查找日志文件上下文
linux通过grep根据关键字查找日志文件上下文 1.在标准unix/linux下的grep命令中,通过以下参数控制上下文的显示: grep -C 10 keyword catalina.out 显 ...
- Git教程 - 远程仓库
到目前为止,我们已经掌握了如何在Git仓库里对一个文件进行时光穿梭,你再也不用担心文件备份或者丢失的问题了. 可是有用过集中式版本控制系统SVN的童鞋会站出来说,这些功能在SVN里早就有了,没看出Gi ...