vuex简单的基本使用

概念：组件之间的数据传递，而不是数据保存
核心内容：会保存在$store对象中
store (一个容器对象，存储Vuex中的state,mutations,actions,getters等)
state：保存的是各个组件需要用到的数据
Vuecomponents：各个组件
mutation：保存的是可以更改state的函数
Action：可以向后台发送请求，触发Mutaion里面的函数，还可以将获取的数据传递到mutaion中来
getters：计算属性，里面保存的是一些函数。

---

使用vuex
1.安装vuex，搭建手脚架

npm i vuex -s

2.创建一个store文件夹，在该文件夹中创建一个index.js文件
2.1引入相应的文件

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

2.2使用vuex

Vue.use(Vuex)

3.创建对象

const state = {}
const mutations = {}
const actions = {}
const getters = {}

4.创建实例并导出实例

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

5.在main.js中引入store里面的index.js文件（记得注入实例）

import store from '../store'   //如果store文件夹是在src里就用@

---

state的定义和触发
6.然后就可以在index.js中的state对象中存入相应的数据(state数据存值)

const state = {
num: 0
}

6.1然后去相应的.vue文件中取出state里面存的文件,用插值表达取（state数据取值）

{{$store.state.num}}

---

mutation的定义和触发
7.1在index.js文件中定义要操作改变state里的数据的函数

const mutation={
//在里面定义一个函数
函数名：state=>{
state.num-=1
}
}

7.2触发，写在相应的.vue文件中。一般定义一个函数然后在该函数里面触发，记得函数写在methods里面

this.$store.commit('7.1函数名')  //该函数一般都是绑定相应的监听

---

getters的定义和触发
8.1在index.js中定义

const getters = {
//里面定义一个函数
  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
}

8.2触发，在相应的.vue组件中

//插值表达
{{this.$store.getters.evenOrOdd}}

---

actions定义和触发
9.1在index.js中定义

const actions = {
//里面定义一个函数，actions中的函数有一个参数，它是一个对象，这个对象里面包含一个commit属性，commit也是一个函数，它可以用来触发mutation中的函数
函数名：obj=>{
console.log(obj)
//在这里还可以发送请求
obj.commit('mutation中的函数名'，放进请求回来的数据)
}
}

9.2触发

this.$store.dispatch('actions中的函数名')  //dispatch是方法