在Vue2中搭建Vuex的环境

搭建Vuex环境

步骤大纲

  • npm i vuex@3**Vue2** 使用版本 **3****Vue3** 可以不用加 @3
  • components下创建文件夹store
  • store下创建index.js脚本
  • main.js中使用sotre

第一步 – store

import Vuex from "vuex";
import Vue from "vue";

Vue.use(Vuex)
// 准备actions用于响应组件中的动作
const actions = { }

// 准备mutations用于操作数据 (state)
const mutations = { }

const state = { }


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

由于Vuex中的store管理着三个模块

  • actions
  • mutations
  • state

所以需要在store中进行配置, 其中actions接收一个动作,mutations进行点单, state是受操作的共享数据。

因为本质上vue是一个插件,所以我们在store中使用Vue.use()来使用了这个插件。

所以在store>index.js中我们需要引入VueVuex就不难解释了。

第二部 – main.js

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

Vue.config.productionTip = false

new Vue({
  el: '#app',
  render: h => h(App),
  store: store,
  beforeCreate() {
    Vue.prototype.$bus = this
  }
})

在程序入口main.js中引入store,并在vm中注册一个store

作者:Sy_
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇