Vuex插件的安装与使用原理

Vuex插件的安装与使用原理

Vuex安装和环境搭建

安装Vuex

  • 第一步:打开CMD窗口,通过命令转到Vue的安装路径
  • 第二步:输入安装Vuex的命令
    • vue2 安装 Vuex3 版本:npm i vuex@3
    • vue3 安装 Vuex4 版本:npm i vuex@4
  • 当在CMD窗口末尾中出现added 1 package in 2m,表示安装完成

Vuex环境搭建

  • 第一步:在Vue文件路径下新建文件夹vuex,并在vuex(新建的文件夹)下创建store.js文件
    • 创建的store.js很重要,创建的文件名决定了之后的调用写法
  • 第二步:在store.js文件中输入以下代码
javascript 复制代码
// 引入Vue
import Vue from 'vue'
// 引入插件
import Vuex from 'vuex'

// 使用插件
Vue.use(Vuex)

// 负责执行行为的对象
const actions = {}
// 负责更新的对象
const mutations = {}
// 负责数据状态
const state = {}
// 负责接收state对象
const getters = {}

export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
  • 第三步:在main.vue文件中引入store.js文件
javascript 复制代码
import store from './vuex/store'

new Vue({
  el : '#app',
  // 不要忘记这里也要添加
  store,
  render: h => h(App),
})

Vuex使用原理

  • 原理:实现数据实时共享


actions(负责执行业务的对象)

  • 注意:以下的context和value并不是一定要写的,当你的业务简单(简单到可以只做一点代码就能完成要求,也不需要更新数据)或者可以跳过这个业务时,可以选择不写,直接通过this.$store.commit('mutations的方法名', value)转到mutations
javascript 复制代码
// xxx.vue
methods : {
    方法名(){
        this.$store.dispatch('actions方法名', 值)
    }
}

// 负责执行业务的对象
const actions = {
    方法名(context, value){
        ......对value执行的业务
        context.commit('这里写mutations的方法名', value)
    }
}
  • context:上下文,将所在方法的值(value)传到下一个(mutations)方法中
  • value:值,actions的值接收的是从xxx.vue文件中的this.$store.dispatch('actions方法名', 值)传过来的数据

mutations(负责更新数据的对象)

  • 对于actions和mutations中的方法名可以在命名时进行区分(一点小建议,当然两个写的一样也没关系)
    • 如actions中的方法名可以按照驼峰式的写法'saveUsername'
    • 而mutations的方法名可以按照全大写叫下划线分隔'SAVE_USERNAME'

传给mutations值的方法分两种:

  • 第一种:通过this.$store.dispatch('actions方法名', 值),将数据传给actions,再通过context.commit('mutations方法名', value)传给mutations方法名中。
javascript 复制代码
// xxx.vue
methods : {
    方法名(){
        this.$store.dispatch('actions方法名', 值)
    }
}

// 负责执行业务的对象
const actions = {
    方法名(context, value){
        ......对value执行的业务
        context.commit('这里写mutations的方法名', value)
    }
}

// 负责更新数据的对象
const mutations = {
    方法名(state, value){
        ......
    }
}
  • 第二种:通过this.$store.commit('mutations方法名', 值),将数据不经过actions的方式,直接传给mutations对象中。
    • 注意:这种只能在没有需要执行业务的情况下进行。
javascript 复制代码
// xxx.vue
methods : {
    方法名(){
        this.$store.commit('actions方法名', 值)
    }
}

// 负责更新数据的对象
// mutations中的对象名,要和actions中的context.commit('mutations中的方法名')一致
const mutations = {
    方法名(state, value){
        ......
    }
}
  • state:数据,接收actions对象中处理好的数据
  • value:值,更新到state的值

state(存放数据的对象,可以看做Vue的data)

  • 所有的数据存放的位置都从这里获取
javascript 复制代码
// 负责数据状态
const state = {
    xxx : '',
    xxx : [
        {id:xxx, name:xxx, age:xxx},
        {id:xxx, name:xxx, age:xxx},
        {id:xxx, name:xxx, age:xxx}
    ]
}

getters(自动接收state对象,可以看做Vue的computed)

javascript 复制代码
// xxx.vue
<template>
    <div>
        <h1>{{$store.getters.对象名}}</h1>
    </div>
</template>

// 自动接收state对象,可对数据进行额外操作,产生不同的效果
// 效果:反转、去除空白行、转大小写 等等
const getters = {
    方法名(state){
        return ......
    }
}
相关推荐
冰万森19 分钟前
解决 React 项目初始化(npx create-react-app)速度慢的 7 个实用方案
前端·react.js·前端框架
星秀日2 小时前
JavaWeb--Ajax
前端·javascript·ajax
嫂子的姐夫2 小时前
10-七麦js扣代码
前端·javascript·爬虫·python·node.js·网络爬虫
Komorebi_99992 小时前
Vue3 + TypeScript provide/inject 小白学习笔记
前端·javascript·vue.js
少吃一口都不行3 小时前
脚手架学习
前端·javascript·学习
地方地方3 小时前
手写JavaScript 深拷贝
前端·javascript
明月与玄武4 小时前
浅谈 富文本编辑器
前端·javascript·vue.js
小帅说java4 小时前
【Spring开发】SpringCloud服务端基础框架第9篇:3.Gateway服务网关【附代码文档】
javascript·spring
千码君20164 小时前
React Native:关于react自定义css属性的位置
css·react native·react.js·前端框架·ecmascript·组件嵌套
FuckPatience4 小时前
Vue 与.Net Core WebApi交互时路由初探
前端·javascript·vue.js