Vue 中使用vuex

我的需求：

• 项目中遇到的不同组件需要共享一个某些数据需要解决，遇到的跨组件共享数据需要攻克
  [在日常业务端开发中，使用不同的组件需要共享同一个数据时，例如相同的模式，用户权限等，获取和设置都需要同步一个数据源，故考虑使用Vuex]

我需要解决的问题：

• 实现不同业务或功能中，使用相同数据源
  [在某用户端前端网站中，通过识别用户进入网站url中的关键字，例如hostname，去显示不同的页面或者组件]

我是这样做的：

• 先去谷歌一下
• 在结合自身所知vuex，构建相关模块。

你存在的意义，诠释了我仓促的青春。

---

博客内容

什么是Vuex

• 官方链接： 链接
• 优点：1、全局，2、可获取，3、可操作，4、可模块化管理
• 缺点：如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的
• 建议：如果只是需要使用相同的变量，可以使用store做简单的状态管理

全局

• 将变量暴露在单页面应用中

可获取

• 单页面应用中，任意组件可以通过导入，并使用对象使用属性的获取的

可操作

• 在组件中可以通过获取后，使用暴露出来的变量进行操作

可模块化管理

• 将变量、操作等属性，进行模块化包装后在暴露出去使用

具体使用

• 安装
  npm install vuex-module-decorators ~ or ~ yarn add vuex-module-decorators

• 使用

// store/modules/passenger.ts
import {Module,VuexModule,Mutation,Action,getModule,} from 'vuex-module-decorators';
import store from '@/store';
 
type User = { username: string; password: string; }
 
// dynamic: true: 动态创建动态模块,即new Vuex.Store({})里面不用注册的.空着就行,
// store,当前模块注册到store上.也可以写在getModule上,即getModule(PassengerStore,store)
// namespaced: true, name: 'passenger' 命名空间
@Module({
  name: 'passenger', dynamic: true, namespaced: true, store,
})
export default class PassengerStore extends VuexModule {
  // state => 要public不然外面调用不到
  public loginInfo: User[] = [];
 
  // getter
  get userNumber(): number {
    return this.loginInfo.length;
  }
 
  @Mutation
  USERINFO(user: User): void {
    console.log(user);
    this.loginInfo.push(user);
  }
  // commit的两种调用方式,第一种,Action后面的括号里面添加commit,然后return的结果就是USERINFO的参数
  @Action({ commit: 'USERINFO' })
  getZhangsan(): User {
    return { username: '张三', password: 'zhangsan' };
  }
  // 第二种,直接this.USERINFO调用;
  @Action
  getLisi(): void {
    const user = { username: '李四', password: 'lisi' };
    this.context.commit('USERINFO', user); // commit调用
    // this.USERINFO(user); // 直接调用
  }
}
// 使用getModule: 对类型安全的访问
export const PassengerStoreModule = getModule(PassengerStore);
 
// sotre/index.ts 
import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
export default new Vuex.Store({ }); // 由于passenger->dynamic: true: 是动态创建动态模块,所以不需要再次注册

在index.vue 中使用

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { PassengerStoreModule } from '@/store/modules/passenger';
 
@Component
export default class IndexPage extends Vue {
    created() {
        console.log(PassengerStoreModule.loginInfo); // state
        console.log(PassengerStoreModule.userNumber); // getter
        PassengerStoreModule.getZhangsan(); // actions
        PassengerStoreModule.getLisi(); // actions
    }
}
</script>