Vue3使用Vuex

一、使用vuex

1.安装vuex

npm install vuex@next --save

2.使用vuex

从vue官网中可以得知vue3使用vuex的方法改变了。

2.1src下新建文件store

新建文件index.js

2.2配置store

import { createStore } from "vuex";

//创建状态
const state = {

}
//创建actions
const actions = {

}
//创建mutataions
const mutations = {

}

//创建store
const store = createStore({
state,
actions,
mutations
})
//暴露出去
export default store

2.3添加到vue中的app

import { createApp } from 'vue'
import App from './App.vue'
import store from './store/index'
createApp(App).use(store).mount('#app')

2.4使用store

首先在组件中引入

import { useStore } from 'vuex'

在setup中使用useStore就是对store进行操作
不如直接新建变量，方便操作

const store  = useStore();

总的代码来看，引入挂载钩子查看是否引入

import { onMounted } from '@vue/runtime-core';
import { useStore } from 'vuex'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup(){
    const store = useStore();
    onMounted(()=>{
      console.log(store)
    })
  }
}

控制台查看，store确实引入，可以进行下一步操作。