vuex的介绍和使用方法

1.什么是vuex？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。

当项目比较庞大的时候，每个组件的状态比较多，为了方便管理，需要把组件中的状态抽取出来，放入Vuex中进行统一管理。常用的登录，购物车等一下数据的存储

State：唯一的数据源，我们需要把任何一个组件中需要抽取出来的变量放入到state中去

Getters：通过Getters可以派生出一些新的状态

Mutations：更改Vuex的store中的状态的唯一方法时提交mutation

Actions：Action提交的是mutation，而不是直接变更状态。Action可以包含任何的异步操作, 但mutation必须是同步操作。

操作步骤： 当组件中的状态发生改变，通过dispatch函数提交到Action，Actions再通过Commit函数提交到Mutations, 此时，状态发生改变都会实时的去渲染组件。

项目中如何使用vuex

在我们的项目中，安装vuex

npm install vuex --save

在src目录中，创建store文件，并创建vuex中模块的文件名，每一个都单独拆分开，便于管理模块。

然后在你的main.js文件引入

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

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

在你的index.js相当于vuex的主目录，文件都在index.js文件引入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

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

state定义所有的状态，mutations是定义同步处理的方法，actions是定义异步处理的方法

然后举一个简单的登录存取token值的例子

同步方法:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
        state:{
           //定义存取的token状态
	   token:''
	},
	mutations:{
           //同步处理
	   set_token(state,action){
               state.token=action
           }
	},
	actions:{
		
	},
})

在组件中调用方法完成存入token值

1	this.$store.commit("set_token", token);

异步方法:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
        state:{
           //定义存取的token状态
	   token:''
	},
	mutations:{
           //同步处理
	   set_token(state,action){
               state.token=action
           }
	},
	actions:{
           //异步调用
	   setToken(context,action){
               context.commit('set_token',action)
           }
	},
})

在组件中调用方法完成存入token值

1	this.$store.dispatch("setToken", token);