vuex基础知识

什么是vuex

官方介绍：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
总结：vuex是一个集中式管理组件依赖的共享数据的工具，可以解决不同组件数据共享问题。

vue的引入

可以在使用脚手架手动创建项目的时候就选中vuex，会自动引入。或者:

1	npm install vuex --save //安装

import Vue from 'vue'
import App from './App.vue'
//引入vuex
import Vuex from 'vuex' 
 
Vue.config.productionTip = false
//注册vuex
Vue.use(Vuex)
const store = new Vuex.Store({
  // 实例化vuex的构造参数 
})
 
new Vue({
  // 通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到
  store,
  render: h => h(App)
}).$mount('#app')

vuex核心模块

vuex核心: state，mutations，actions，getters，modules
vuex

state

state是放置所有公共状态的属性，如果你有一个公共状态数据，你只需要定义在 state对象中。下面就是定义了一个存储数字的count。

const store = new Vuex.Store({
  state: {
    // 管理数据
    count: 0
  }
})

我们怎样在其他组件使用state里面的值呢？
主要是两种方式：
1.原始形式
组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count，如下：

1
2
3

<!-- 通过this.$store.state.count使用 -->
<!-- 使用插值表达式获取，省略this -->
<div>{{$store.state.count}}</div>

2.辅助函数 mapState
mapState是辅助函数，帮助我们把store中的数据映射到组件的计算属性中, 它属于一种方便用法

import {mapState} from 'vuex'
export default {
  computed: {
//利用展开运算符将导出的状态映射给计算属性
    ...mapState(['count'])
  }
}

然后直接当作计算属性使用:

1 2	<!-- 使用插值表达式获取 --> <div>{{count}}</div>

我们怎么修改count的值呢？

mutations

使用mutations修改state里面的数据。state数据的修改只能通过mutations，并且一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步。

const store = new Vuex.Store({
  // 实例化vuex的构造参数
  state: {
    count: 0
  },
  // 通过mutation操作state里面的值,同步操作
  mutations: {
//定义一个让count增加的方法，每次增加多少要传递参数
    add (state, num) {
      state.count += num
    },
//定义一个让count减少的方法，每次减少多少要传递参数，以对象的形式传递。
    sub (state, payload) {
      state.count -= payload.num
    }
  }
})

mutations里面存放修改state数据的方法。方法的第一个参数是store里面的state属性。我们可以在state上面找到我们存放的数据；方法的第二个参数是payload（参数名字也可以自己重命名），载荷，调用mutaiions的时候，可以传递参数，任何形式的参数都可以。官方推荐大多数情况下payload应该是一个对象，因为包含多个字段时使用对象形式更清晰已读。

然后我们在其他组件中使用：
1.原始形式：

1 2	<div @click="$store.commit('add',2)">点击每次count增加2</div> <div @click="$store.commit('sub',{num:1})">点击每次count减少1。参数以对象形式传递</div>

2.辅助函数 mapMutations
和mapState很像，把位于mutations中的方法提取了出来，我们可以将它导入。mapMutations将组件中的 methods 映射为 store.commit调用。用法：

import { mapState, mapMutations} from 'vuex'
export default {
  methods: {
//然后当作普通方法使用
    ...mapMutations(['add', 'sub'])
  },
  computed: {
    ...mapState(['count'])
  }
}

//例如
 <div @click="add(2)">+</div>

actions

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作。比如异步请求数据和定时器等操作。官方介绍：Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。所以我们在addAsync 中使用context.commit(‘add’, num)使用了mutations的add方法。

const store = new Vuex.Store({
  // 实例化vuex的构造参数
  state: {
    count: 0
  },
  // 通过mutation操作state里面的值,同步操作
  mutations: {
    add (state, num) {
      state.count += num
    },
    sub (state, payload) {
      state.count -= payload.num
    }
  },
  // 异步操作，通过mutations间接更改state的值
  actions: {
//一秒后增加count的值
    addAsync (context, num) {
      setTimeout(function () {
        context.commit('add', num)
      }, 1000)
    }
  }
})

在其他组件中使用：
1.原始形式：

1	<div @click="$store.dispatch('addAsync',2)">点击后等待一秒再增加2</div>

2.辅助函数 mapActions

import { mapActions} from 'vuex'
export default {
  methods: {
    //当作普通方法调用就好
    ...mapActions(['addAsync'])
  }
}

getters

有时我们还需要从state中派生出一些状态，这些状态是依赖state的，然后我们就会用到getters

const store = new Vuex.Store({
  // 实例化vuex的构造参数
  state: {
    count: 0
  },
  // 通过mutation操作state里面的值,同步操作
  mutations: {
    add (state, num) {
      state.count += num
    },
    sub (state, payload) {
      state.count -= payload.num
    }
  },
  // 异步操作，通过mutations间接更改statement的值
  actions: {
    addAsync (context, num) {
      setTimeout(function () {
        context.commit('add', num)
      }, 1000)
    }
  },
 
  getters: {
    handeleCount: (state) => {
      return `${state.count}只小鸡`
    }
  }
})

在其他组件中使用：
1.原始形式：

1	<div>{{$store.getters.handeleCount}}</div>

2.辅助函数：

import { mapGetters } from 'vuex'
export default {
  computed: {
   //然后当作计算属性使用即可
    ...mapGetters(['handeleCount'])
  }
}
 
//例如
<div>{{handeleCount}}</div>

总结

1.state定义数据，使用$store.state获取
2.mutations修改数据，同步操作，使用$store.commit提交修改。
3.actions主要用于异步操作，通过mutations间接修改state数据，使用$store.dispatch提交修改。
4.getters主要用于派生依赖state的数据，使用$store.getters获取
此文章介绍的是vuex最基础的使用，更多用法和更详细的介绍指路官网：https://vuex.vuejs.org/zh/