vuex环境的搭建及使用方法

vuex环境的搭建及使用方法

概念

在vue中实现集中数据管理的插件，也是一种组件间通信的方式，适用于任意组件间通信

GitHub地址：http://github.com/vuejs/vuex

vuex使用场景

当有数据需要共享时

搭建vuex环境步骤：

准备工作：下载vuex npm i vuex

1. 创建store文件夹，包含index.js文件，该文件用来创建store
2. 在index.js中引入Vue和Vuex,并使用vuex插件 Vue.use(Vuex)
3. 准备actions、mutations、state
4. 创建store并暴露
5. 在main.js中添加store

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

//使用vuex插件
Vue.use(Vue)
//准备actions、mutations、state
const actions={}
const mutations={}
const state={}
//创建store并暴露
export default new Vuex.store({
	actions,
	mutations,
	state
})

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

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

使用vuex步骤

原理图（配合下方步骤食用）

在组件中调用组件实例对象.$store.dispatch(‘函数名’,要用到的值)

methods: {
	//判断总和是否为奇数，为奇数则加
      checkNum() {
      this.$store.dispatch("checkodd", this.optionval);
    },
}

到index.js中，在actions里面写业务逻辑和发送ajax请求

const actions = {
	checkodd( context , value ){
	//context上下文对象，里面会有一些在这个阶段需要的东西，context.commit进行下一步
	if( state.sum%2 )
	context.commit('CHECKODD',value)
	}
}

注意：mutations里面函数名要大写，以便区分

在mutations里面写操作

const mutations={
	CHECKODD(state,value){
	state.sum=state.sum+value
}
}

注意：有时逻辑简单的methods可以直接通过commit与mutations沟通

比如：

  methods: {
    add() {
      this.$store.commit("JIA", this.optionval);
    },
}