vuex api的用法

掌握工作中Vuex核心API用法以及基本原理
Vuex是什么
Vuex是Vue的状态管理工具，为了更方便实现多个组件共享状态。

Vuex的特点：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
Vuex核心功能点
我们使用Vue脚手架创建一个项目作为本次演练的开发环境。

vue create vuex-demo

复制代码
注意：生成项目的时候，记得选中vuex，避免后面手动安装vuex并导入到main.js中。
State
第一步：在仓库store中定义需要全局共享的state变量

state: {
   
   age: 25
}

复制代码
第二步：在对应的组件中获取并显示在页面上

<p>{
   {
   $store.state.age}}</p>

复制代码
Getters
getters相当于组件中的computed计算属性。当state中定义的数据发送变化后，getters中的数据会自动跟着变化。
第一步：在仓库store中定义好getters

getters: {
   
   getAge(state) {
   
      return state.age + 1;
   }
}

复制代码
第二步：在对应的组件中获取并显示在页面上

<p>{
   {
   $store.getters.getAge}}</p>

复制代码
Mutations
第一步：在仓库store中定义需求调用的mutation方法

mutations: {
   
   incre(state, payload) {
   
      state.age += payload.age;
   }
}

复制代码
注意：参数payload可以是对象。
第二步：在对应组件中定义触发更改状态的模板和方法
// template

<button @click="add">增加</button>

// script

methods: {
   
   add() {
   
      this.$store.commit('incre', {
   age: 1});
   }
}

复制代码
注意：'incre’名称一定要和mutations中定义的名称一样。
Actions
第一步：在仓库store中定义需求调用的mutation方法

actions: {
   
   increAsyn({
   commit}, payload) {
   
      commit('incre'