vuex的使用

1.先安装npm install vuex --save-dev

2.在src下建立文件夹vuex,在vuex里面写store.js

/**
 * Created by ywz on 2017/8/12.
 */
import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)

const store = new Vuex.Store({
  // 定义状态
  state: {
    author: ‘Wise Wrong‘
  },
  mutations:{
    newAuthor (state,msg){
      state.author=msg;
    }
  }
})

export default store

第三步 在main.js中
import Vuex from ‘vuex‘
Vue.use(Vuex);
/* eslint-disable no-new */new Vue({  el: ‘#app‘,  router,  store,  render: h => h(App)});

第四部显示在页面
<div>自拍照{{author}}</div>
computed: {    author()    {        return this.$store.state.author;    }}

第5步 设置修改
methods: {    setAuthor(){      //this.$store.state.author=this.user;      this.$store.commit(‘newAuthor‘,32223);    }},
时间: 2024-07-31 17:41:42

vuex的使用的相关文章

vuex中filter的使用 &amp;&amp; 快速判断一个数是否在一个数组中

vue中filter的使用 computed: mapState({ items: state => state.items.filter(function (value, index, arr) { return index < 5 }) }), 如上所示,对于vuex,我们在使用mapState获取state时, 可以使用filter来过滤其中的元素,在filter的回调函数中接受三个参数,第一个是value,即每一个元素的值: 第二个是index, 即每一个元素所在的index, 第三个

初识vue 2.0(4):vuex组件通信

0,本来想只用vue就可以做项目了,后来发现不行:一个网页被切分成若干个组件,组件之间是需要数据传递的,因此引入了vuex这个集中式存储.管理的状态管理模式. 1,安装vuex: npm install --save vuex 在main.js中引入: import Vuex from 'vuex' Vue.use(Vuex) 2,创建数据源文件vuex/store.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) co

Vue入门之Vuex实战

引言 Vue组件化做的确实非常彻底,它独有的vue单文件组件也是做的非常有特色.组件化的同时带来的是:组件之间的数据共享和通信的难题. 尤其Vue组件设计的就是,父组件通过子组件的prop进行传递数据,而且数据传递是单向的.也就是说:父组件可以把数据传递给子组件,但是 反之则不同.如下图所示: 单向数据流动 单方向的数据流动带来了非常简洁和清晰的数据流,纯展示性或者独立性较强的模块的开发确实非常方便和省事. 但是复杂的页面逻辑,组件之间的数据共享处理就会需要通过事件总线的方式解决或者使用Vue的

[Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js

You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. Creating a remove action looks almost the same as the add action except for using the axios.delete method then filtering out the deleted todo once the

[Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js

You often use the same data in different ways across pages. This lesson walks you through setting up multiple pages, retrieving the same data, then displaying it for each page's use-case. index.vue: <template> <div> <form @submit.prevent=&q

vuejs + vuex

vuejs 的数据是双向绑定的,而这些数据只是在父组件中,如果各个组件公用的数据就要通过一个容器去管理起来, vuex是不错的选择, 今天看了下vuex的教程: 总结下遇到的问题: vue-cli 了一个项目 import的时候发现了报错:node的版本太低,升级版本就好了. import { mapState, mapActions, mapGetters, map } from "vuex";//注意大括号. https://github.com/lin-xin/notepad/

vuex初探

什么是vuex? 如果你学过react,那么你就更容易理解vuex,因为vuex相当于react中的redux,它是用于管理数据的工具. 为什么要使用vuex? 因为如果不用vuex,我们也可以控制组件之间的通信,但是会非常的难以管理,而通过vuex我们可以更为方便的控制数据在组件之间的通信. 尤其是对于父组件向子组件传递数据,我们可以通过props,而子组件向父组件传递数据,我们可以使用events up. 但是如果希望组件之间的通信(这往往也是最为需求的), 我们就很难处理,这是vuex就派

vuex简单示例

一.vuex是什么,解决了什么问题? 官方解释是:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.个人理解是因为vue各个组件是相对独立的,要共享数据,就变的很麻烦.vuex就是为了解决各个组件传递数据与共享数据. 二.vuex的核心概念 vuex的核心概念是store,store中包括了state,mutation,action,getter 1.state:需要用到的状态变量2.mut

vuex学习笔记

参考地址:https://vuex.vuejs.org/zh-cn/intro.html Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式管理存储管理应用的所有组件的状态,并以相应规则保证状态以一种可预测的方式发生变化 什么是"状态管理模式"? 1 new Vue({ 2 // state 3 data () { 4 return { 5 count: 0 6 } 7 }, 8 // view 9 template: ` 10 <d

[Nuxt] Update State with Vuex Actions in Nuxt.js

You can conditionally add classes to Vue.js templates using v-bind:class. This will help display the status of a todo as you add a Vuex action to patch todos. This lesson walks you through setting up a toggle button that triggers a toggle action to p