Vue学习（十五）——Vuex

1.安装Vuex

在终端使用npm install vuex --save语句安装

但是第一次就出现了问题

经过查询发现是package.json文件中项目的name不能是vuex

修改之后安装成功

2.简单的使用vuex——state以及mutations

需求是在不同的组件中修改并显示一个值

我们在安装完vuex之后，需要创建一个store文件夹（就像路由那样），在文件夹中创建一个index.js文件，执行安装插件、创建对象、导出对象的操作。

import Vue from 'vue'
import Vuex from 'vuex'


//1.安装插件
Vue.use(Vuex)


//2.创建对象
const store = new Vuex.Store({
    state:{
        counter:520
    },
    mutations:{
        incremment(state){
            state.counter++
        },
        decremment(state){
            state.counter--
        }
    },
    actions:{},
    getters:{},
    modules:{}
})

//3.导出store对象
export default store

再在main.js文件中挂载，然后再回到index.js文件中的store对象中的state属性中放置公共读取的变量，在组件中通过$store.state.counter来读取。但是是只读的，不能这样直接修改，否则会报错，我们必须在store对象中的mutations属性中定义公共的方法，然后通过按钮的点击事件函数触发，使用$store.commit('方法名')来调用这一公用方法，这样就不会报错了。

<template>
  <div id="app">
    <h2>-----App中的-----</h2>
    <p>{{$store.state.counter}}</p>
    <h2>******Hellowvuex中的******</h2>
    <Hellowvuex></Hellowvuex>
    <button @click="add">+</button>
    <button @click="sub">-</button>
  </div>
</template>

<script>
import Hellowvuex from '../src/components/Hellowvuex'
export default {
  name: 'App',
  components: {
    Hellowvuex
  },
  methods:{
    add(){
      this.$store.commit('incremment')
    },
    sub(){
      this.$store.commit('decremment')
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

3.state的单一状态树

简单的来说就是一个项目中只用创建一个Vuex.store

4.getters的使用

getters和组件的计算属性是类似的

我们还可以在getters的属性函数中传入一个state参数，这样就可以使用state中的数据，传入第二个参数getters可以使用其他getters属性

再提出一个需求，我们手动的传入一个参数，返回数组中年龄大于这个参数的球员，我们的解决办法是返回一个函数，给返回的函数传入一个参数就可以这样完成了

5.对mutations的一些补充

（1）普通的提交风格——以下例子是设定两个按钮，一个+5一个+10，我们只定义一个函数给这两个按钮绑定不同的响应函数传入不同参数即可。

（2）特殊提交封装

如上所示，我们用这种方式传入参数的时候，count就不是一个值了，而是一个对象

Mutation响应规则

Vuex的store中的state是响应式的，当state中的数据发生改变时，Vue组件会自动更新，但是这些属性必须式提前再store中初始化好所需的属性，比如我们再在state中加入元素时，就不能是响应式的了。我们在state中添加新属性时，应当使用Vue.set()或者用新对象给旧对象重新赋值。

像下面这样就不是响应式的操作了，数据已经添加，但是界面并没有改变。

而像下面这样就可以完成响应式的添加操作了

而像下面这样则可以完成删除属性的响应式操作

mutations的类型常量，我们在使用mutations中的方法的时候容易打错，而造成某些错误，这时我们就需要类型常量了，在一个js文件中声明一个常量为一个mutations函数名字符串，在定义以及使用的文件中导入此类型常量使用即可。

6.action异步操作

异步操作我们需要在action中定义

7.Module模块

当我们使用单一状态树，那么意味着很多状态都会交给Vuex来管理，当应用变得非常复杂时，store对象就可能变得相当臃肿，为了解决这个问题，Vuex允许我们将store分割成模块，每个模块都可以拥有自己的state，action，getters，mutations，而module的getters的第一个参数是satate，第二个参数是getters，第三个参数是rootState，可以用外面的store中的变量。

8.解构赋值