Vuex的工作原理、环境搭建和基本使用

目录

1.概念

2.何时使用

3.Vuex的工作原理

3.搭建Vuex环境

①创建文件：src/store/index.js 

②在main.js中创建vm时传入store配置项 

4.基本使用 

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

②组件中读取vuex中的数据

 ③组件中修改vuex中的数据

备注：

5.案例完整效果及代码 

 子组件MyCount.vue

src下创建store文件夹中的index.js

main.js

---

1.概念

       在Vue中实现集中式状态（数据）管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理（读、写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用

       多个组件间需要共享数据时。

3.Vuex的工作原理

3.搭建Vuex环境

• npm i vuex@3（因为使用vue2，所以安装vuex的3版本）
• Vue.use(Vuex)
• store（其中管理着actions、mutations、state）
• vc（所有组件的实例对象都能看到store）

①创建文件：src/store/index.js 

//该文件用于创建Vue中最为核心的store

//引入vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {}
//准备mutationgs——用于操作数据（state）
const mutations = {}
//准备state——用于存储数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

②在main.js中创建vm时传入store配置项 

......
//引入store
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)

const actions= {
  //响应组件中加的动作
  jia(context,value){
    //console.log('actions中的jia被调用了'，miniStore,value)
    context.commit('JIA',value)
  },
}

const mutations={
  //执行加
  JIA(state,value){
    //console.log('mutations中的JIA被调用了'，state,value)
    state.sum += value
  }
}

//初始化数据
const state = {
  sum:0
}

//创建并暴露store
export defalut new Vuex.Store({
  actions,
  mutations,
  state
})

②组件中读取vuex中的数据

$store.state.sum 

 ③组件中修改vuex中的数据

$store.dispatch('actions中的方法名'，数据)

或

$store.commit('mutations中的方法名'，数据)

备注：

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

5.案例完整效果及代码 

 子组件MyCount.vue

src下创建store文件夹中的index.js

//该文件用于创建Vue中最为核心的store

//引入vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions——用于响应组件中的动作
const actions = {
    jia(context, value) {
        console.log('actions中的jia被调用了');
        context.commit('JIA', value)
    },
    jian(context, value) {
        console.log('actions中的jian被调用了');
        context.commit('JIAN', value)
    },
    jiaOdd(context, value) {
        console.log('actions中的jiaOdd被调用了');
        if (context.state.sum % 2) {
            context.commit('JIA', value)
        }
    },
    jiaWait(context, value) {
        console.log('actions中的jiaWait被调用了');
        setTimeout(() => {
            context.commit('JIA', value)
        }, 500);
    }
}
//准备mutationgs——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        console.log('mutations中的JIA被调用了');
        state.sum += value
    },
    JIAN(state, value) {
        console.log('mutations中的JIAN被调用了');
        state.sum -= value
    }
}
//准备state——用于存储数据
const state = {
    sum: 0 //当前的和
}

//创建store
const store = new Vuex.Store({
    actions,
    mutations,
    state
})

//暴露（导出）store
export default store

main.js

import Vue from 'vue'
import App from './App.vue'
//引入store
import store from './store'
//关闭Vue生产提示
Vue.config.productionTip = false


//创建vm
new Vue({
  el: '#app',
  render: h => h(App),
  store
})
// console.log(vm);