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‘))引用方法

import Vue from ‘vue‘;
import Vuex from ‘vuex‘;
Vue.use(Vuex);

var state = {
    count:1
}

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>

原文地址:https://www.cnblogs.com/chenyishi/p/9190609.html

时间: 2024-10-10 13:19:23

Vue Vuex state mutations的相关文章

VUE - vuex state的使用

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:

vue+vuex构建单页应用

基本 构建工具: webpack 语言: ES6 分号:行首分号规则(行尾不加分好, [ , ( , / , + , - 开头时在行首加分号) 配套设施: webpack 全家桶, vue 全家桶 项目结构 基本目录结构 api :封装与后端接口交互的操作 common :放置一些 reset.css 之类的 components :组件 entry :项目入口文件 index.js,index.css,index.html filters :过滤器.注:虽然 vue2.0 已经基本废弃(只保留

【mock.js】后端不来过夜半,闲敲mock落灯花 (附Vue + Vuex + mockjs的简单demo)

mock的由来[假] 赵师秀:南宋时期的一位前端工程师 诗词背景:在一个梅雨纷纷的夜晚,正处于项目编码阶段,书童却带来消息:写后端的李秀才在几个时辰前就赶往临安度假去了,!此时手头仅有一个简单的数据接口文档的赵师秀慨叹一声:"好吧,那还是我自己先模拟一下后端的接口吧" _(:3 」∠)_  再后来,就有了那句千古名句啦~~( 为了表示对赵师秀先生的歉意,文末我将附上原文)   如果我说这就是前后端分离思想和mock.js的由来,你会信么?(?´ω`?) mock的由来[真] 我们在Vu

vue+vuex+axios+echarts画一个动态更新的中国地图

一. 生成项目及安装插件 # 安装vue-cli npm install vue-cli -g # 初始化项目 vue init webpack china-map # 切到目录下 cd china-map # 安装项目依赖 npm install # 安装 vuex npm install vuex --save # 安装 axios npm install axios --save # 安装 ECharts npm install echarts --save 二. 项目结构 ├── ind

vuejs学习——vue+vuex+vue-router项目搭建(一)

前言 快年底了却有新公司邀请了我,所以打算把上家公司的学到一下技术做一些总结和分享. 现在vuejs都2.0了,我相信也有很多朋友和我一样实际项目还是选择vue1.0的或者给新手一些参考,不管在选择哪个版本的时候,希望你都熟读了vue+vuex+vue-router的官方文档.下面我们就开始吧. Vue搭建 这里我假设我们的电脑都安装了nodejs,那么我现在开始吧. 我们先新建一个文件(VueProject),通过命令行的方式进入这个文件夹,现在假设我们进入了VueProject文件夹,接下来

vue+vuex实现 counter计数器

vue+vuex实现 counter计数器 框架搭建好过后输入npm run dev的时候不会直接打开浏览器,在config文件夹找到index.js文件夹 把autoOpenBrowser: false改为autoOpenBrowser: true,从新在命令行输入npm run dev,这是就会自动打开浏览器. 如图修改 现在做个简单的demo示例:counter(计数器) 一.文件夹与文件的创建 1.首先要在components文件夹下面创建counter的一个文件夹 2.然后在count

Vue+Vuex实现自动登录 升级版

Vue+Vuex实现自动登录 升级版 之前实现的版本在这里:Vue+Vuex实现自动登录 ? ??? 在之前实现的版本中,如果你进行测试,可以看到在浏览器的local Storage中,确实里面有了我们加入的Authorization,而且如果没有登录的话,直接访问主页会进入登录页面.但其实有好几个问题并没有解决: ? ??? 一.我们所加的Authorzation其实并不是从服务器传过来的,而是自己的测试:只要服务器传过来了200的响应状态码,我们就自己加上固定的Authorization ?

VUE—路由(七)vuex state

一.安装vuex 安装完后发现多了store.js文件 store.js相当于仓库,会把所有的数据写在state中 二.安装好后重新运行 三.在学员展示页面添加功能 1)在Student.vue中引入两个组件 2)在component中添加这两个组件 3)把两个组件里面的内容写好 4)在student.vue中使用组件 显示结果: 四.获取store中的数据 可以通过$store获取 数据池中: studentList中: 给button添加点击事件改变名字时,发现添加学生名字没变 原因是dat

vue中监听vuex state变化,亲测可用

import {mapGetters} from 'vuex' computed: { ...mapGetters([ 'showChip' ]) }, watch: { showChip(newVal) { this.chipInState = newVal } } //试了几种方案,只有这个起效果了,记录一下. 原文地址:https://www.cnblogs.com/changlun/p/12333718.html