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

我要学前端！

已于 2023-04-04 15:24:21 修改

阅读量201

点赞数 1

分类专栏： Vue2笔记文章标签： vue vue.js 前端框架前端

于 2023-04-03 14:53:39 首次发布

本文链接：https://blog.csdn.net/min0320/article/details/129924795

版权

Vue2笔记专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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

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

4.基本使用

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

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

<template>
  <div>
    <h1>当前求和为：{{ $store.state.sum }}</h1>
    <select v-model="n">
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "MyCount",
  data() {
    return {
      n: 1, //用户选择的数据
      sum: 0, //当前的和
    };
  },
  methods: {
    increment() {
      this.$store.dispatch("jia", this.n);
    },
    decrement() {
      this.$store.dispatch("jian", this.n);
    },
    incrementOdd() {
      this.$store.dispatch("jiaOdd", this.n);
    },
    incrementWait() {
      this.$store.dispatch("jiaWait", this.n);
    },
  },
  // mounted() {
  //   console.log("MyCount", this);
  // },
};
</script>

<style>
button {
  margin-left: 5px;
}
</style>

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);