data 获取vuex_十、Vue：Vuex实现data(){}内数据多个组件间共享

一、概述

1.1vuex有什么用

Vuex：实现data(){}内数据多个组件间共享一种解决方案(类似react的redux)

1.2什么情况下使用vuex

虽然 Vuex 可以帮助我们管理共享状态，但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

1.3Vuex状态管理

view ->(dispatch) Action ->(Commit) Mutations ->(Mutate) State -> View

注意：Action不是必需品，如果有异步操作才可能用到Action，否则可以不使用

1.4Actions：

Action 提交的是 mutation，而不是直接变更状态。

Action 可以包含任意异步操作。

二、安装及使用

安装方法1，npm

cnpm install vuex --save

或

npm install vuex --save

安装方法2，cdn

其它略过，见文档。

【使用】

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来安装 Vuex：

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

当使用全局 script 标签引用 Vuex 时，不需要以上安装过程。

2.1 vuex定义共享数据和引用 state:{}

应用场景： 例如在购物车中，你在商品详情页进行加减库存操作，而到购物车详情中时，用之前学得的data(){}内数据用法，你是得不到商品详情里的商品数量这个数据的，此时就引入了state:{}做为所有页面的共享数据，加减商品都可使用此处的数据，从而实现数据的共享。

代码实例

(多余代码为父子组件互传值复习)

第1步，引入vuex并创建store实例 src/main.js

[1]引入vuex

[2]使用vuex

[3]创建一个store实例(主要)

[4]所有组件共用数据存放处

[5]注入store(重要)

import Vue from 'vue'

import App from './App.vue'

import Vuex from 'vuex' //[1]引入vuex

Vue.use(Vuex)//[2]使用vuex

//[3]创建一个store实例

const store=new Vuex.Store({

state:{//[4]所有组件共用数据存放处

count:10

}

})

new Vue({

el: '#app',

store,//[5]注入store

render: h => h(App)

})

第2步，引用1步所创建的共享数据count(src/components/home.vue)

【1】获取store里的共享数据方法1直接调用(this.$store.state.count)

{ {msg2}}

home:获取vuex的store共用数据：{ {this.$store.state.count}}

import Hello from './hello.vue';

export default{

name:'home',

data(){

return{

msg:'Home向Hello传的消息',

msg2:''

}

},

components:{Hello},

methods:{

getmsg(data){

this.msg2=data;

}

}

}

第2.2步，其它组件都可以引用共享数据

src/components/hello.vue

【1】写一个函数获取vuex并返回store共享数据

【2】获取vuex的store共享数据方法2(在computed内写一个获取函数，再调用)

hello子组件：{ {getCount}}----{ {title}}

给父组件传消息

export default{

name:'hello',

data(){

return{

msg:'Hello子组件向父组件传数据'

}

},