vue技术点之vuex初步使用

接上篇技术点axios，整个vue中，发送一个请求获得了数据，获得tonken。
问题：拿到tonken存储问题，而且需要在多个界面多个组件中用到这个数据

vuex：状态管理

VUEX,状态管理模式，核心是store（仓库）,仓库中的数据是响应式的，放store状态发生改变的时候，数据也会发生更新，并且必须通过提交mutation改变状态

核心概念有
state：单一状态树，存储数据
getter：store的计算属性，会把返回值进行缓存
mutation：提交事件，用于改变store状态
action：提交的是mutation，并非直接更改状态，但是可以 包含任意异步操作
module：模块，为避免store过于臃肿，所以允许声明模块，每个模块有自己的作用域

详细的可以去看官方文档，这里重点是应用

简单点说核心思维就是：在state中设置数据，所有组件就可以获得，组件中也可以调用mutation属性修改state数据，那么这个时候所有组件中的值也会发生更改

1.安装

打开终端：npm install vuex --save

2.src目录下创建store/index.js文件

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

Vue.use(Vuex)

const store = new Vuex.Store({//创建常量 设置vuex的值 一个名称对应一个值
  	state:{
		//存入值
		token:"user:token:8001"
	}
})

export default store

3.在main.js中引入store模块

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import store from './store/index.js'

Vue.config.productionTip = false

Vue.prototype.$http = axios

new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

4.在需要使用的组件中引用

import {mapState} from 'vuex'

然后添加计算属性
computed:{  //...的作用 es6中的扩展运算符 就是一个遍历，取出token
			//token对应的是store文件夹中state的值
	...mapState(["token"])
}

界面上直接使用
<h1>{{this.token}}</h1>