VueX

安装

NPM

npm install vuex@next --save

Yarn

yarn add vuex@next --save

使用

创建store

安装Vuex 后，需要创建一个store。用来存放全局状态count。

新建一个store文件夹，创建index.ts。

import { createStore } from 'vuex'

// Create a new store instance.
const store = createStore({
  state () {
    return {
      count: 0
    }
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
export default store;

在main.ts中引入store

import store from "./store";
app.use(store);

使用全局数据

在html中使用

{{ this.$store.state.count }}

在ts中使用

const increment = () => {
  rootStore.commit("increment");
  console.log(rootStore.state.count);
};

分模块

在store目录下创建新的分支模块，user.ts。

import { StoreOptions } from "vuex";

export default {
  namespaced: true,
  state: () => ({
    userName: "chuan",
  }),
  mutations: {},
  actions: {},
} as StoreOptions<any>;

在index.ts中导入

import user from "./user";