28《Vue 入门教程》Vuex 简介、安装

本小节我们会介绍数据管理工具vuex 。包括什么是 Vuex、Vuex 的安装、以及如何创建和使用 Vuex 数据仓库。

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

让我们从一个简单的 Vue 计数应用开始：

实例演示

"运行案例" 可查看在线运行效果

这个状态自管理应用包含以下几个部分：

以下是一个表示 “单向数据流” 理念的简单示意：

但是，当我们的应用遇到多个组件共享状态时，单向数据流的简洁性很容易被破坏：

对于问题一，传参的方法对于多层嵌套的组件将会非常繁琐，并且对于兄弟组件间的状态传递无能为力。对于问题二，我们经常会采用父子组件直接引用或者通过事件来变更和同步状态的多份拷贝。以上的这些模式非常脆弱，通常会导致无法维护的代码。

因此，我们为什么不把组件的共享状态抽取出来，以一个全局单例模式管理呢？在这种模式下，我们的组件树构成了一个巨大的 “视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为！

通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。

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

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

我们可以在官网 (vuex) 上直接下载vuex 。 在Vue之后引入vuex会进行自动安装：

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

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

每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

实例演示

"运行案例" 可查看在线运行效果

代码解释 在 JS 代码第 4-8 行，通过 new Vuex.Store ({…}) 创建数据仓库。 在 JS 代码第 12 行，我们可以通过 store.state.count 访问仓库中定义的数据。

本节，我们带大家学习了 vuex 的基本概念。主要知识点有以下几点：

vuex是一个专门为vue构建的状态管理工具，主要是解决多组建状模穗态共享的问题。强调的是集中式管理（组件与组件之间的关系变成了组建跟仓库之间的关系）。

vuex的核心包括：state（存放状态）、mutations（同步的更改状态）、actions（发送异步请求拿到数据）、getters（根据之前的状态发布新的状态）、modules（模块划分）

state发布一条新的数据，在getters里面更具状态派发新的状态，actions发送异步请求获取数据，然后再mutations里面同步的更新数据

使用场景：购物车的数据共享，登入注册

vuex的原理：

vuex实现了一个单项数据流，在全局又有一个state存放数据，当组建要更改state中的数据时，必须通过Mutation进行，mutation同时提供了订阅者模式供外部插件调用获取state数据的更新。而当所有异步 *** 作（常见于调用后台接口异步获取更新数据）或批量的同步 *** 作需要走Action，但Action也是无法直接修改state的，还是需要通过mutation来修改state的数据。最后根据state的变化，渲染到视图上。

vuex的使用

1、src目录下面新建一个vuex的文件夹

2、vuex 文件夹里面新建一个store.js

3、安装vuex 

cnpm install vuex --save

4、在刚才创建的store.js引入vue  引入vuex 并且use vuex

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

5、定义数据

/*1.state在vuex中用于存储数据*/

var state={

    count:1

}

6、定义方法 mutations里面放的是方法，方法主要用于改变state里面的数据

var mutations={

    incCount(){

++state.count

    }

}

暴露

const store = new Vuex.Store({

    state,

    mutations,

getters

})

export default store

组建里面的使用

1.引入 store

import store from '../vuex/store.js'

2、注册

export default{

data(){

    return {             

      msg:'我是一个home组春咐件',

value1: null,

    }

},

store,

methods:{

    incCount(){

this.$store.commit('incCount')  /*触发 state里面的数据*/

    }

}

 扒码纯   }

3、获取state里面的数据

this.$store.state.数据

4、触发 mutations 改变 state里面的数据

this.$store.commit('incCount')

getters，有点类似计算属性，改变state里面count数据的时候，会出发getters里面的方法，获取新值

var getters={

computedCount:(state)=>{

return state.count*2

})

页面使用：this.$store.getters.computedCount

action

action类似于mutation，不同在于，

action 提交的事mutation，而不是直接改变状态（也就是state里面的值）。

action 可以包含任意异步 *** 作

var actions={

acctionsincCount:(context)=>{

context.commit('incCount')

})

页面使用：this.$store.dispatch()

1、安装和配置Vuex

1) vuex是一个插件，所以我们需要通过npm指令安装。

npm i vuex

2) 在main.js人口文件引入Vuex，插件需要应用就需要将插件应用Vue.use(Vuex)，这个是直接在main.js直接写Vuex的部分代码，不符合模块化这个思路，所以不建议这样去写。在开发中如果使用到vuex，一般是创建一个名为store的文件夹，在此文件夹下有一个index.js文件，在这蚂念扮写对应的vuex代码。

import Vue from 'vue'

import App from './App.vue'

// 引入Vuex

import Vuex from 'vuex'

Vue.use(Vuex)

const actions = {

}

const mutations = {

}

const state = {

perosn: {

name: '张三',

age: 18,

sex: '男'

}

}

const store = new Vuex.Store({

actions, mutations, state

})

const vc = new Vue({

render: h =>h(App),

store,

}).$mount('#app'高森)

console.log(vc)

3) 这里是使用模块化写vuex代码，使用的是默认暴露，有一个要点要说一下，Vue.use必须写在这个文件里面，如果在main.js写Vue.use(Vuex)，由于框架先解析import里面文件，在外面写的Vue.use(Vuex)不能被里面的识别到，所有会报错。到这里Vuex的配置就好了，下面我们写组件来观察这个Vuex中的数据如何获取和修改。

// 这里写关于store的代码

// 引入vue

import Vue from 'vue'

// 引入Vuex

import Vuex from 'vuex'

Vue.use(Vuex)

const actions = {

}

const mutations = {

}

const state = {

person: {

name: '张三',

age: 18,

sex: '男'

}

}

export default new Vuex.Store({

actions, mutations, state

})

配置完成后在控制台输出Vue对象闷灶可以看见

---