Vuex环境搭建

环境搭建,无非是安装,使用,再new一个store,最后要让所有的VC的实例对象都能看见vc。

  1. 安装vuex
npm i vuex
  1. 使用vuex
Vue.use(vuex)
  1. new 一个store
  2. 让store被vc看见
  • 注意:
    在这里插入图片描述

1. 安装Vuex

默认npm i vuex,安装的是vuex4版本。
如果想安装vuex3版本的话,输入下面的代码:

npm i vuex@3

2.使用Vuex

在main.js文件中:

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

3.new 一个store (以方法2为例)

有2种选择:

  • 第一种
    在这里插入图片描述

  • 第二种 (官方写法)
    一般,你在项目中看到store文件夹,相当于看到了vuex
    在这里插入图片描述
    index.js文件中:

  //该文件用于创建Vuex中最为核心的store
 import Vue from 'vue'
 //使用插件
 Vue.use(Vuex)
 //引入Vuex
 import Vuex from 'vuex'
 //准备Actions:   响应组件中的动作。
 const actions = {}
 //准备Mutations: 操作数据(State)
 const mutations = {}
 //准备State:     存储数据
 const state = {}

 //创建store,并对外暴露store
export default new Vuex.Store({
     actions,//触发了重名写法,这里指:actions:actions
     mutations,
     state,
 })


  1. 让store被看见
  • 在main.js中创建vm时传入store配置项
//引入store
import store from './store/index'
……
//创建vm
const vm = new Vue({
    el:'#app',
    store, //指:store:'store',
    render: h=>h(App),
})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值