vuex环境配置及使用

vuex环境搭建

1.下载vuex，如果你是开发Vue2，请下载vuex3版本

npm i vuex@3

2.搭建vuex的环境配置

​ 创建 src/state/index.js 文件

//导入Vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'

//使用vuex
Vue.use(Vuex)

//准备actions---响应组件中用户的动作
const actions = {}
//准备mutations----修改state中的数据
const mutations = {}
//准备state对象---保存具体的数据
const state = {}

//创建默认暴露对象
export default new Vuex.Store({
    actions,mutations,state
})

3.在main.js创建vm的时候传入store配置项

//导入 ./store/index.js
import store from './store'

.....
//在vm中使用
new Vue({
	el:'#app',
	render: h => h(App),
	store
})

4.基本使用

初始化数据、配置actions、配置mutations，操作文件store.js

//导入Vue
import Vue from 'vue'
//导入vuex
import Vuex from 'vuex'

//使用vuex
Vue.use(Vuex)

//准备actions---响应组件中用户的动作
const actions = {
    jia(context,value){
      //context  文本的上下域，方便对前后阶段进行操作，如果流程过多，可以方法执行
        //此阶段制作处理，不做修改
        context.commit('JIA',value)
    }
}
//准备mutations----修改state中的数据
const mutations = {
    JIA(state,value){
		//拿到actions传来的数据，进行处理修改
        //state可以直接访问到内部的数据
        state.sum += value
    }
}
//准备state对象---保存具体的数据
const state = {
    sum: 0
}

//创建默认暴露对象
export default new Vuex.Store({
    actions,mutations,state
})

1. 组件中读取vuex中的数据：$store.state.sum

2. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

   备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit