锐客网

  1. 首页 > 睿知 > it技术 > >

vue|vue 在js 文件中使用store_【vue】vue +element 搭建项目，vuex中的store使用

vue在js文件中使用store

概述：
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
store中 state为属性
store中 getter为计算属性
store中 mutation用于更改状态mutation必须是同步函数。
采用store.commit方法触发
store中的action类似于mutation,
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
Action 通过 store.dispatch 方法触发
应用：
1.依赖安装
npm install vuex --save
2.在src目录下新建文件夹 store，在该文件夹下创建store.js(此用法有报错，见下)
store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 0
}，
mutations: {
increment(state) {
state.count++
}
}
})
export default store
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store'
Vue.config.productionTip = false
Vue.use(ElementUI);
new Vue({
router,
store,
template: '',
components: { App },
}).$mount('#app')
效果：(./store in ./src/main.js)
vue|vue 在js 文件中使用store_【vue】vue +element 搭建项目，vuex中的store使用
文章图片

解决方案：将store.js更名为index.js
index.vue
home
export default {
name:'home',
created(){
this.$store.commit('increment')；
console.log(this.$store.state.count);
},
}
效果：
vue|vue 在js 文件中使用store_【vue】vue +element 搭建项目，vuex中的store使用
文章图片

3.store用法2
在store文件夹下新建 一个名为modules文件夹，在此文件夹下创建practice.js
practice.js
/**
* 用于学习store
*/
const practice = {
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
},
}
export default practice
stroe文件下创建getters.js
const getters = {
practice_count: state => state.practice.count,
};
export default getters
store文件夹下创建index.js
import Vue from "vue";
import Vuex from "vuex";
import practice from './modules/practice';
import getters from './getters';
Vue.use(Vuex);
const store = new Vuex.Store({
modules: {
practice
},
getters
});
export default store
store.vue
store-getter用法 count值：{{practice_count}} count值2：{{$store.getters.practice_count}} import {mapGetters} from 'vuex';
export default {
name:'vueStoreDemo',
data() {
return {
}
},
computed: {
...mapGetters([
'practice_count'
])
},
created(){
this.$store.commit('increment')
},
methods: {},
}
.title{
font-size: 14px;
padding-left: 20px;
color: #333;
line-height: 34px;
background-color: #F5F5F5;
}
效果：
vue|vue 在js 文件中使用store_【vue】vue +element 搭建项目，vuex中的store使用
文章图片

....未完待续
参考资料：https://www.cnblogs.com/yesyes/p/6659292.html
https://www.cnblogs.com/chengkun101/p/7979153.html
https://www.cnblogs.com/wisewrong/p/6344390.html
https://www.cnblogs.com/first-time/p/6815036.html
Vue + TypeScript + Element 搭建简洁时尚的博客网站及踩坑记
前言 本文讲解如何在 Vue 项目中使用 TypeScript 来搭建并开发项目,并在此过程中踩过的坑 . TypeScript 具有类型系统,且是 JavaScript 的超集,TypeScript ...
vue. js + element 搭建后台管理系统 笔记(一)
此文仅记录本人在搭建后台系统过程中遇到的难点及注意点,如果能帮到各位自然是极好的~~~ 项目主要架构:vueJS.elementUI.scss 一.项目初始化 首先需要安装nodejs,安装方法就不在 ...
vue教程3-webpack搭建项目
vue-cli https://cli.vuejs.org/zh/ vue-cli是vue的命令行工具,对于创建项目,安装各种组件,运行项目都极为方便,是在开发vue中的必备工具 vue-cli基于n ...
vue之mapMutaions的使用 &; &; vuex中 action 用法示例 &; &; api. js的使用
vue之mapMutations的使用 我们通过Mutation来改变store中的state,方法往往是在子组件中使用 this.$store.commit(); 来实现,但是这样的缺点是不容易查看 ...
使用vuex中的store存储数据
Vuex是一个专门为Vue.js应用程序开发的状态管理模式,这个状态自管理应用包括三个模式 state 驱动应用的数据源 view 以声明方式将state映射到视图 actions 响应在view上的 ...
【vue】vue + element 搭建及开发中项目中，遇到的错误提示
1. import Layout from '@/views/layout/Layout'; export default [ { // 配置路由,当路径为'/activePublic',使用组件ac ...
【vue】vue + element 搭建项目，mock模拟数据(纯干货)
1.安装mockjs依赖 (c)npm install mockjs --save-dev 2.安装axios(Ajax) (c)npm install --save axios 3.项目目录 4.设 ...
【vue】使用vue+ element搭建项目，Tree树形控件使用
1.依赖安装 本例中,使用render-content进行树节点内容的自定义,因此需要支持JSX语法.(见参考资料第3个) 在Git bash中运行一下指令 cnpm install\ babel-p ...
【vue】vue + element 搭建项目，vue-cli 如何打包上线
以自己的项目为例 第一步:手动修改config文件夹中的index.js文件中的build对象,将 assetsPublicPath 中的 “/” ,改为 “你实际的加载路径” 如图: 第二步:执行( ...
随机推荐
POJ2175 Evacuation Plan
Evacuation Plan Time Limit: 1000MSMemory Limit: 65536K Total Submissions: 4617Accepted: 1218...
将 instance 连接到 vlan100- 每天5分钟玩转 OpenStack(95)
上一节我们创建了 vlan100,今天将部署两个 instance 到 vlan 并验证其连通性. 同时我们也将讨论底层网络结构的变化. launch 新的 instance "cirros ...
ES6新特性之解构使用细节
ES6的解构说白了就是能够让我们一次性取到多个值,大致可分为一下几个方面 1.数组解构 普通的一维数组解构,如下one = array[0],two=array[1],three=array[2] v ...
LCA—倍增法求解
LCA(Least Common Ancestors) 即最近公共祖先,是指在有根树中,找出某两个结点u和v最近的公共祖先. 常见解法一般有三种 这里讲解一种在线算法-倍增 首先我们定义fa[u][j ...
关于Discuz! X系列远程代码执行漏洞
一.漏洞起源 突然有同事反馈,无法注册 看到这里不了解的同行估计一年懵逼,这里也是常用的漏洞攻击,可以肯定的是badwords.php文件被修改了 ,可以查看这个文件内容 Oracle的导入和导出
导出命令: EXP 用户名/密码@数据库名BUFFER=64000 file=G:\dmp\full1.dmpOWNER=用户名 导入命令: IMP 用户名/密码@数据库名 BUFFER=64 ...
Python3学习策略
自学Python要点 [来自:http://www.cnblogs.com/shsxt/p/9138950.html] 1.找一本浅显易懂,例程比较好的教程,从头到尾看下去. 不要看很多本,专注于一本 ...
C语言中生产随机数 rand( ) 函数
参考资料:C语言中产生随机数 一:如果你只要产生随机数而不需要设定范围的话,你只要用rand()就可以了:rand()会返回一随机数值, 范围在0至RAND_MAX 间.RAND_MAX定义在stdl ...
My97DatePicker：开始时间和结束时间的最大间隔为1个月30天，并且不大于当前时间(3种方法)
问题的背景 在之前做Web项目的时候,开始时间和结束时间,只有2个要求: 1.开始时间必须小于等于结束时间,不能超过当前时间. 2.结束时间必须大于等于开始时间,不能超过当前时间. 由于开始时间不大于 ...
(广搜)聪明的打字员 -- POJ --1184
【vue|vue 在js 文件中使用store_【vue】vue +element 搭建项目，vuex中的store使用】链接: http://poj.org/problem?id=1184 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=88230#probl ...

    推荐阅读


    上一篇：vue|vue + element-ui 聊天_优秀的10个Vue开源项目

    下一篇：vue.js|vue + element-UI 实现深色模式和主题色动态切换