Vuex基本使用

Vuex是什么？

Vuex是专门为Vuejs应用程序设计的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

为什么要使用Vuex？

vuex 类似Redux 的状态管理器, 用来管理Vue的所有组件状态。

实现多组件状态管理。多个组件之间需要数据共享时，Vuex是个很好的帮手哦

采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

Vuex 的五大核心

1. state

负责状态管理，类似于vue中的data，用于初始化数据；

2. getter

getter 计算属性 ,依赖于state值，需要return

Vuex中的计算属性，相当于vue中的computed,依赖于state状态值，状态值一旦改变，getter会重新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要使用getter；

3. action

组件中触发action，注意使用dispatch

可以处理异步，通过dispatch触发，不能直接修改state，首先在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值；

action也是函数。

action不能直接修改state，首先要在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值。

state会显示到view，用户会根据view上的内容进行操作，触发action然后再去影响state。

4.mutation

mutation实质是一个函数，接收state和调用时传来的params参数

组件中调用mutation,记得要用commit触发

同步处理，专用于修改state中的数据，通过commit触发

5.module

当应用变得非常复杂时，store 对象就有可能变得相当臃肿。
这时我们可以将 store 分割为模块（module），每个模块拥有自己的 state 、 getters 、mutations 、actions 、甚至是嵌套子模块——从上至下进行同样方式的分割。

Vuex使用：

1. 下载

npm install vuex -s

2. 下载完之后在src中创建store文件夹，在创建一个store.js文件

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

// 让vue使用vuex工具来实现组件之间的数据共享
Vue.use(Vuex)

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

3. 在main.js中引入store.js 然后注入store

//引用store.js
import store from '@/store/store.js'

Vue.use(ElementUI)
Vue.config.productionTip=false
/* eslint-disable no-new */
new Vue({
el:'#app',
//注入store
store,
components:{App},
template:'<App/>'
})

4. 定义
   通过this.$store访问Vuex的数据

/ 存储数据的对象，我们可以将你需要存储的数据在这个state中定义
const state = {
  // 当前登陆的用户名
  username: ''
}
const mutations = {
  // 提供一个方法，为state中的username赋值
//   这些方法有一个默认的参数，这个参数就是当前store中的State
  setUserName (state, username) {
    //存入一个值
    state.username = username
    localStorage.setItem('myname', username)
  },
  getUserName (state) {
    //输出一个值
    return state.username
  }
}

//使用的时候---> 通过commit调用mutations中定义的函数，这个函数就是操作state中定义的成员的函数
   // this.$store.commit('setUserName', res.data.username(请求返回的值))


const actions = {
  setUserNameAction: ({commit}, username) => {
    commit('setUserName', username)
  },
  getUserNameAction: ({commit}) => {
    commit('getUserName')
  }
}

// 通过action来触发mutations中的函数，这种触发方式是异步方式--->使用
//存入  this.$store.dispatch('setUserNameAction', res.data.username + 'aa')
//取出  this.currentUserName = this.$store.dispatch('getUserNameAction')


//Getters是从 store 中的 state 中派生出一些状态，即当出现多处需要导入某个状态时，结果不是很理想，所以getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
const getters = {
  getUserName: (state) => {
    return localStorage.getItem('myname')
  }
}

//使用的时候   直接使用
// <span class="welcome">你好：{{$store.getters.getUserName}}</span>

Vuex是通过全局注入store对象，来实现组件间的状态共享。

Vue组件简单常用的通信方式有以下几种：

• 父子通信：

  父向子传值，通过props；子向父传值通过events ($emit)；父调用子方法通过ref；provide / inject。

• 兄弟通信：bus

• 跨级嵌套通信：bus；provide / inject等。