Vuex的基本入门、使用场景及安装配置

什么是Vuex?

用2句话归纳：

1. 主要应用于Vue.js中管理数据状态的一个库
2. 经过建立一个集中的数据存储，供程序中全部组件访问

固然这么说确定仍是有所不懂，这里我就用单一使用vue.js和使用vuex.js场景的不一样进行对比讲解

---

单一使用Vue.js的场景

在单一使用vue.js的场景中，咱们不免要在不一样的组件中互相传值。在该场景中，由一个根组件，两个父组件再各自拥有一个子组件，咱们若是使用prop的属性传值，在这个详情组件须要使用添加组件中的某个值时，咱们须要不停的触发某个事件将这个值一层一层一层一层地沿着这个路径传过去，这样能实现将值传递给详情组件，但这是至关的麻烦（鬼知道我当初不知道vuex为了传值头有多大）。如今让咱们看下vuex.js场景下的效果

使用Vuex.js的场景

咱们将使用专门的store存储全部的数据，若是咱们须要取到组件二或更深一级的子组件的某个数据咱们能够直接使用getter方法直接拿到其中的数据。若是咱们须要向store中添加或更改某个数据，咱们能够用mutation或直接$store.state的形式直接跨过父组件向store中直接添加或更改数据。就比如一个仓库，全部人能直接跨过上级拿到仓库中的某个你所须要的东西，这无疑是在咱们使用vue开发项目时，至关省时省力的办法。

Vuex的使用场景

• 涉及到非父子关系的组件，例如兄弟关系、祖孙关系，甚至更远的关系组件之间的联系
• 中大型单页应用，考虑如何更好地在组件外部管理状态

相信你们在看完上面vuex的基本介绍后，内心对它使用场景也有了一个大概的想法。
总而言之，在页面数据结构比较复杂，数据和组件分离，分别处理，组件量较大的状况下，那么使用 Vuex 是很是合适的。

Vuex的安装配置

在使用vue-cli脚手架建立项目后

npm install vuex

进入项目安装vuex,安装完成后，在项目的文件夹src中再新建一个文件夹store,文件夹中新建文件store.js(命名为本人习惯)。

store.js

//引入vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'

//引入以后，对vuex进行引用
Vue.use(Vuex)

main.js

import {store} from './store/store'

new Vue({
  store:store,//使用store
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  
})

在main.js 中引入vuex文件

到此为止，vuex的引入就算是成功了。

基本概念

State

如今回到咱们的store.js中

//建立且声明一个对象
export const store = new Vuex.Store({
    state:{
        isShow:true,
        items:[
        {
            name:"张三",
            num:"1"
        },
        {
            name:"李四",
            num:"2"
        },
        {
            name:"王五",
            num:"3"
        }
        ]
    }
})

这里不一样于文档中的写法，我这里直接将建立声明简写成一段代码（我的更偏好这样写）。在state中填写外部组件须要的数据。外部组件中调取数据：

computed:{
        itemList(){
            return this.$store.state.items
        }
    },

//这里有两种办法
//p在computed的itemList方法中循环
<p v-for="item in itemList">{{item.num}}{{item.name}}</p>

//p直接指向store中的state的items数组
<p v-for="item in this.$store.state.items">{{item.num}}{{item.name}}</p>

能够经过computed中的方法获取数据，也能够直接使用this.$store.state。

Getters

getters乍一看也是获取数据，可是在获取以前它多了一个步骤：计算过滤获取的数据并返回过滤完成后的数据。若是多个组件须要用到筛选后的数据，那咱们就必须处处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入。
store.js

getters:{
        numChange(state){
            return state.items.forEach(item=>{
                item.num+=100
            })
        }
    }

组件中：

//写法一：
<p v-for="item in this.$store.getters.numChange">{{item.num}}{{item.name}}</p>

//写法二：
<button @click="numTurn">改变数字</button>

computed:{
        numChange(){
            return this.$store.getters.numChange
        }
    },

p标签在computed中返回getters数据的中循环，数据显示出来便直接是计算完成后的数据

Mutations

咱们可使用mutations配合vuex提供的commit方法来修改state中的状态

store.js

export const store = new Vuex.Store({
    state:{
        isShow:false,
        myData:'',
        items:[
            {
                name:"张三",
                num:1
            },
            {
                name:"李四",
                num:2
            },
            {
                name:"王五",
                num:3
            }
            ]
    },
    mutations:{
        //定义一个函数动态修改state的状态值
        numTurn(state){ /这里的state表明上面的State
            state.items.forEach(item=>{
                item.num+=100
            })
        }
    }
})

组件中：

//写法一：
<button @click="$store.commit('numTurn')">改变数字</button>

//写法二：
<button @click="numTurn">改变数字</button>

methods:{
        numTurn(){
            this.$store.commit('numTurn')
        }
    }

两种写法原理是同样的，都能实现效果。注意：mutations中的方法须要commit配合回调实现，而再也不是$store.mutation,且mutations只能处理同步函数，那若是须要处理异步操做怎么办？

Action

如文档中所说,Action相似于Mutations,不一样在于：

• Aciton提交的是mutation,而不是直接变动状态
• Action能够包含任何异步操做

那也就是说，若是咱们是须要任意的异步操做，那就须要在Action中实现

---

部份内容略过，本文主要关于vuex基础理解和使用

推荐视频： https://ke.qq.com/course/258141