vue3.0使用vuex

vue3.0使用vuex

下载安装

npm install [email protected] --save
cnpm install [email protected] --save
yarn add [email protected] --save

项目中使用
在根目录下创建store文件夹，store下创建index.ts文件

import { createStore } from 'vuex';

export default createStore({
    state: {
        
    },
    mutations: {
    // 进行数据更新，改变数据状态
        
    },
    actions: {
    //执行动作，数据请求
       
        }
    },
    getters: {
    // 获取到最终的数据结果
       
    }
})

在根目录下的main.ts中引入并挂载

import store from './store'
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).use(store).mount('#app')

在组件中

import { reactive } from 'vue'
import { useStore } from 'vuex'
export default {
    
    setup(props:any, context:any) {
        const store = useStore();
        var series = ref<ExamDataModel.MicroSeries>();
        
        //通过状态管理拿到实时变化的当前选中的series
        store.watch((state, getters) => getters.currentProtocol, (res) => {
            series.value = res;
        });
        function ScanPanelControl() {
            context.emit(FrontComponentEvent.ScanPanelControl);
        }

        return {
            ScanPanelControl, series
        }
    }
    
}

vue2 与vue3的差异
store文件夹中
vue2

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
export default new Vuex.Store({})

vue3

import {createStore }from 'vuex'
export default createStore ({})

mian.js
vue2

vue3

组件使用
vue2

import { mapMutations } from ‘vuex’ // 引入vuex
export default {
name: “city”,
data() {
return {
city: [
{ id: 1, name: ‘北京’ }
{ id: 2, name: ‘上海’ }
{ id: 3, name: ‘广州’ }

		]
	}
},
methods: {
	// 修改
	...mapMutations({
		changeCity: "city/changeCity"
	}),
	// 第一种写法
	handChangeCity(cityName) {
		this.changeCity(cityName)
	}
	// 第二种写法  不需要使用 ...mapMutations
	handChangeCity(cityName) {
		this.$store.commit('city/changeCity', cityName);
	}
}

}

vue3

```typescript
import { defineComponent, computed } from 'vue'
// useStore 可以将store中的数据和方法获取到的方法
import { useStore } from 'vuex';
export default defineComponent({
  // vue3的组合api 运行在beforeCreate之前 为了方式this使用错误 setup中直接将this的值设置成了undefined 所以在setup中没有this
  setup() {
    let store = useStore()
    // console.log(store.state);
    // 在setup中定义的方法和数据如果需要在页面中使用 则需要先将数据或者方法返回
    return {
      name: computed(() => store.state.name),
      age: computed(() => store.getters.changeAge),
      changeName: (name) => store.commit('changeName', name), // 使用mutation方法的函数
      getProducts: () => store.dispatch('getProducts'), // 调用actions函数的方法
      products: computed(() => store.state.products)
    }

  }
})