从新回归Vue之3.0（四）：动态组件，vuex

三，引入vuex配置和使用

npm install vuex@next --save

main.ts

import { createApp } from 'vue'
import App from './App.vue'
// 导入store模块, 传入 injection key
import store from './store';
 
const app = createApp(App)
app.use(store)
app.mount('#app')

store文件夹下index.ts

// 引入
import { createStore } from "vuex";
 
export default createStore({
  // 声明变量
  state: {
    "name": 'xxxxx'
  },
  // 修改变量（state不能直接赋值修改，只能通过mutations）
  mutations: {
    setName(state, newValue){
      state.name = newValue
    }
  },
  actions: {},
  modules: {},
});

vuex.vue测试文件

<template>
  <button @click="changeName" size="small">点击修改名称button>
template>
 
<script setup lang="ts">
import { ref, reactive, watch, onMounted, computed } from "vue";
import { useStore } from 'vuex'
// data
const store = useStore()
let name = computed(()=>{ return store.state.name });
// props
// emit
// methods
function changeName():void{
    store.commit('setName', '哈哈哈')
    console.log('修改后的名称：'+name.value);
}
//watch
// defineExpose
// 生命周期
onMounted(() => {
  console.log(name.value)
});
 
script>