Vuex的使用

Vuex的使用"/>

Vuex的使用

Vuex是一个专为Vue.js应用程序开发的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

一、Vue组件传值的方式

• 父向子组件传值：父组件v-bind（缩写：）属性绑定，子组件props接收
• 子向父组件传值：子组件$emit触发，父组件v-on（缩写@）事件绑定
• 兄弟组件之间数据共享：EventBus

二、关于Vuex

Vuex是适用于在Vue项目开发时使用的状态管理工具。如果一个项目开发中频繁的使用组件传参的方式来同步data的值，一旦项目变得很庞大，管理和维护这些值将是非常复杂的工作。Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——Vuex。在项目中，我们只需把这些值定义在Vuex中，就可以在Vue项目的组件中使用。

三、Vuex的安装

1.下载vuex: npm install vuex --save
2.在项目根目录下新建一个store文件夹，在文件夹内新建index.js,初始化Vuex:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);const store = new Vuex.Store({state: {count: 1000}
})export default store;

3.将store挂载到vue实例中，在main.js中添加：

import Vue from 'vue';
import store from './store/index'
import App from './App.vue';
import router from './router';Vue.config.productionTip = false;new Vue({router,store,render: h => h(App),
}).$mount('#app')

4.在组件中使用vuex
（1）将state中定义的count拿来在h1标签中显示：

<template><div id='app'><h1>{{ $store.state.count}}</h1></div>
</template>

（2）或者要在组件方法中使用：

  created() {console.log(this.$store.state.count)          // 打印出1000}

四、Vuex的核心概念

4.1 核心概念的描述

• State：存储应用状态数据的对象，与vue中data类似
• Getters：类似vue的计算属性，store中数据的变化，getters的数据也会发生变化
• Mutations： 提交mutation来修改store中的状态，同步操作
• Actions：与mutations类似，提交修改state的行为，处理异步任务（提交的是mutation，不是直接修改状态）
• Modules： 模块化状态管理，为了开发大型项目，方便状态管理而使用的

4.2 工作流程

• 首先，vue组件调用某个Vuex的方法过程中需要向后端请求时或者出现异步操作时，需要dispatch Vue中的actions方法，以保证数据的同步。actions的存在是为了让mutations中的方法能在异步操作中起作用。
• 如果没有异步操作，我们可以直接在组件内提交状态中的mutations里自己编写的方法来完成对state成员的操作。不建议在组件中对state直接进行操作（如：ths.$store.count = 1）。这样的话不能被VueDevtools所监控到。
• 最后被修改后的state成员会被渲染到组件的原位置当中去。

4.2.1 mutations

（1）定义mutations

const store = new Vuex.Store({state: {count: 1000},mutations: {add(state,step){// 变更状态state.count += step;}}
})export default store;

（2）触发mutations

  methods: {changeEvent() {// 触发mutations，可以通过mutations传递参数this.$storemit('add',5);}}

点击按钮如下：

4.2.2 actions

用于处理异步任务。
（1）定义actions

const store = new Vuex.Store({state: {count: 1000},mutations: {// 只有 mutations 中定义的函数，才有权利修噶 state 中的数据add(state,step){// 变更状态state.count += step;}},actions: {addAsync(context,step) {setTimeout(() => {contextmit('add',step)},3000)}}
})export default store;

（2）触发actions

      this.$store.dispatch('addAsync',5);

点击异步按钮延时数据才会变化：

4.2.3 getters

Getter 用于对 Store 中的数据进行加工处理形成的新的数据。

1. Getter类似vue的计算属性
2. Store中数据的变化，Getter的数据也会发生变化
   (1）定义getters

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);const store = new Vuex.Store({state: {count: 1000},mutations: {// 只有 mutations 中定义的函数，才有权利修噶 state 中的数据add(state,step){// 变更状态state.count += step;// 不要在mutations函数里，执行异步代码// setTimeout(() => {//   state.count++// }, 3000)}},actions: {addAsync(context,step) {setTimeout(() => {contextmit('add',step)},3000)}},getters: {showNum: state => {return `当前的新数据是【${state.count}】`}}
})export default store;

（2）使用getters

 <template><div class="content"><img alt="Vue logo" src="../assets/logo.png"><div>当前最新count值：{{$store.state.count}}</div><div>getters: {{$store.getters.showNum}}</div><button @click="changeEvent1">触发同步按钮</button><button @click="changeEvent2">触发异步按钮</button></div>
</template>
<script>
export default {name: 'Content',methods: {// 触发mutations，可以通过mutations传递参数changeEvent1(){this.$storemit('add',5);},// 调用dispatch触发actions时携带参数changeEvent2() {this.$store.dispatch('addAsync',5);},}
}
</script>

页面显示：