Vuex之5大核心API

vuex中5大核心概念分别有：

1. State
2. Mutation
3. Getter
4. Action
6. Module

---

开始准备：

cnpm install vuex -S //安装

接着
在src目录下我们创建一个store文件夹，接着在它下面创建一个index.js(我们把Vuex逻辑就写在这里面)

然后我们在main.js中全局的引入一下

并在实例中挂载它，这样准备工作就OK了！

---

一：State 这里我们可以存储初始化的数据

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={
    changeableNum:0  //初始值我先设置的0
};
const store =new Vuex.Store({
    state,   //这里要将state扔到Srore中来
})
export default store; //把store暴露出去

我们已经设置了一个初始的state中值，如果需要获得这个值，那么我们有一下几种方法可以使用

直接使用在{{}} 中使用this.$store.state.changeableNum就可以得到了，但是这种方式不推荐使用，我们这个用Vuex官方提供的一

种mapState 辅助函数来获取状态值

首先我们需要引入import { mapState } from 'vuex‘

computed:{
    ...mapState(['changeableNum'])  //映射出来
  },

computed:{
     ...mapState({  //同上
      footer:state=>state.changeableNum
     })
  },

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键

---

二：Mutation
如果我们需要更改上面changeableNum的状态值的话，那我们就可以用到这个Mutation了

在index.js中添加

const mutations={   //别忘记扔到Store中里去
    newNum:(state,sum)=>{
        state.changeableNum+=sum;
    },
};

在两个形参中，第一个就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，
第二个就是我们需要改变什么状态值，官方也称它为提交载荷（Payload）

我们需要触发这个mutation的话 那么就调用store.commit(‘newNum’，666)就行了

也可以用不同的风格来编写

store.commit({  //效果同store.commit('newNum'，666)
  type: 'newNum',
  amount: 666
})

注意的是我们在使用mutation时一条重要的原则就是要记住 mutation 必须是同步函数！！！
注意的是我们在使用mutation时一条重要的原则就是要记住 mutation 必须是同步函数！！！
注意的是我们在使用mutation时一条重要的原则就是要记住 mutation 必须是同步函数！！！

---

三：Getter

我们用Getter可以派出一些在state中的状态

const getters = {  //同样别忘记向Store扔
    doneTodos(state) {   
        return state.todos.filter(todos => todos.done)  //这是一个官方的例子，对列表进行了过滤
    },
    doneTodesCount(state,getters) {   //这里形参的第二个参数getters是接受其他 getter 作为第二个参数，这样写更简洁代码
        return getters.doneTodos.length
    },
};

doneTodos(){    //这里的代码在computed计算属性中
      return this.$store.getters.doneTodos
    },
  	 doneTodosCount(){
      return this.$store.getters.doneTodesCount
    },

在组件中需要return this.$store.getters.xxx来调用getter

<h1>今天完成了{{doneTodosCount}}件事情</h1>
    <ul>
      <li v-for="(todo,index) in doneTodos" :key="index">{{todo.name}}</li>  //我在state中写了一些假数据模拟了一下
    </ul>

getter也同样可以用辅助函数来调用映射

mapGetters({
  // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
  doneTodos: 'doneTodos',
  doneTodosCount:'doneTodosCount'
})


//或者
computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([    //再次说明这里辅助函数的写法是ES6中的写法
      'doneTodos',
      'doneTodosCount',
      // ...
    ])
  }