VueX的使用

Vuex的使用

1 下载

打开cmd窗口输入

npm i vuex@3

注意：vue2版本要装vuex@3
vue3版本要装vue@4

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

3 在index.js输入以下代码

导入Vuex文件：

import Vuex from 'vuex'

展示效果

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
   
//准备actions对象——响应组件中用户的动作、处理业务逻辑
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
   
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

4 在main.js里输入以下：

导入store文件：

import store from './store'

展示效果

import Vue from 'vue'
import App from './App.vue'
// 引入store,不是index名
import store from './store'

Vue.config.productionTip = false

new Vue({
    el:"#app",
    render: h => h(App),
    store
})

5 在App.js里通过查看this，来判定是否使用成功

6 安装成功