第一天:Vuex下载及使用

官网：Vuex 是什么？ | Vuex

一、下载:

npm  i   vuex

+ vuex@4.0.2

二、创建仓库

vue@2（vuex@3）

在src/文件夹下，创建 store/index.js

// 引入vue
import Vue from  "vue"
//引入vuex
import  Vuex  from "vuex"
// 使用vuex核心插件
Vue.use(Vuex)

export  default new  Vuex.Store({
    state:{},
    mutations:{},
    actions:{},
    getters:{},
    modules:{}
})

vue@3（vuex@4）

在src/文件夹下，创建 store/index.js

<br class="Apple-interchange-newline"><div></div>

import  {createStore} from "vuex"

​

export default createStore({

    state:{},

    mutations:{},

    actions:{},

    getters:{},

    modules:{}

})

在main.js：

vue@2（vuex@3）

// 引入封装的仓库
import  Store  from "store"

new  Vue({
    Store
}).$mount("#app")

vue@3（vuex@4）

// 引入封装的仓库
import  Store  from "store"

// 在实例中注册仓库模块
app.use(Store)

useStore

<h1>{{title}}</h1>

在setup中使用

import {useStore} from "vuex"

export default {
    setup(){
        
        
        let  store=useStore()
       // console.log(store.state.msg);//hello vuex@4.0
 
        return {
            title:store.state.msg
        }
    }
}