<十>vuex 状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单的说就是多个组件之间共享的数据的存储的地方。

Vuex由三部分组成。

• Actions负责数据的处理，
• Mutations负责数据修改，
• State负责数据存储。

1、安装vuex,安装完成查看node_Modules有没有vuex文件

npm install vuex --save

2、在src中创建一个store的文件夹用来存放vuex的文件，在创建一个index.js作为vuex的配置文件，内容如下：

import Vue from 'vue'
import Vuex from 'vuex'
//声明使用vuex
Vue.use(Vuex)
// 新建一个store
export default new Vuex.Store({
  state: { // state用来存储数据，
    testInfo: 'hello'   //数据以键值对形式存储  
  }
})

3、main.js引入vuex.

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

4、上面state存储了一个数据进去，使用this.$store.state.数据名，来获取数据。

换掉默认路由的组件为12345.vue

 {
      path: '/',
      name: '12345',
      component: a12345
    },

根组件内容恢复成初始

<template>
  <div id="app">
    <img src="./assets/logo.png">
     <router-view/>
  </div>
</template>

这样就去除了路由相关代码的影响。修改12345组件的内容，

<template>
  <div class='hello'>{{this.$store.state.testInfo}}</div>
</template>

<script>
export default {
  name: '12345',
  data () {
  }
}

运行看，hello就是我们定义的testInfo的值。

 

 5、修改vuex参数有两种方式，一种是actions->mutations->state;一种是mutations->state。

action和mutations的区别：

二者扮演角色的不同：Mutation：专注于修改State，理论上是修改State的唯一途径。Action：业务代码、异步请求。

二者有不同的限制：Mutation：必须同步执行。Action：可以异步，但不能直接操作State。

从上面二者的区别也可以看出来了state,Mutation,Action实际上有不同的分工，那么为了便于管理，可以在文件上给与解耦。

那么就可以这么分层了：index.js只作vuex的创建和state的声明，新建一个mutation.js和action.js分别存放他们相应的代码。

 给mutatioin.js添加更改testInfo.的代码

export default {
  changeinfo (state, arg) {
    state.testInfo = arg
  }
}

给action.js添加更改testInfo.的代码

export default {
  changeinfo (context, arg) {
    context.commit('changeinfo', arg)
  }
}

在store/index.js种给vuex配置mutatioin和action

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutation'
import actions from './action'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    testInfo: 'hello'
  },
  actions: actions,
  mutations: mutations
})

修改12345.vue,添加一个button点击改变文字

<template>
<div>
 <button @click="changeInfo">点击</button>
  <div class='hello'>{{this.$store.state.testInfo}}</div>
</div>
</template>

<script>
export default {
  name: '12345',
  methods: {
    changeInfo () {
      this.$store.dispatch('changeinfo', 'hello change')
    }
  }
}
</script>

最后运行：