vuex简单的案例

一、安装 vuex

npm install vuex --save

二、创建store文件夹，index.js文件

index.js源码：

import { createStore } from "vuex";
// 应用vuex插件
//注意：全局引入之后，在这里添加的数据全局都可以使用
// 创建并暴露store
export default createStore({
  // 给state里添加数据,相当于data，你可以吧state想象成组件中的data，专门来储存数据。
  state: {
    Number: 100,
    String: "hello",
  },
  //准备getters——用于将state中的数据进行加工
  getters: {},
  //准备mutations——用于操作数据（state）
  mutations: {},
  //准备actions——用于响应组件中的动作
  actions: {},
  modules: {},
});

三、在main.js中全局引入

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
 
//引入vue x
import store from "./store";
 
createApp(App).use(store).mount("#app");

四、在组件里添加数据 

HelloWord.vue源码：

运行结果：

五、点击按钮累加数字

index.js源码：

import { createStore } from "vuex";
// 应用vuex插件
//注意：全局引入之后，在这里添加的数据全局都可以使用
// 创建并暴露store
export default createStore({
  // 给state里添加数据,相当于data，你可以吧state想象成组件中的data，专门来储存数据。
  state: {
    Number: 100,
    String: "hello",
  },
  //准备getters——用于将state中的数据进行加工
  getters: {},
  //准备mutations——用于操作数据（state）
  mutations: { add(state, num) {
    state.Number += num; // 将num增加到state.Number上
  }
},
  //准备actions——用于响应组件中的动作
  actions: {},
  modules: {},
});

HelloWord.vue源码： 

运行结果：

六、配合NutUI 3.0储存用户信息

1、安装NutUI 3.0插件，npm i @nutui/nutui@3

2、在main.js中全局引入

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
 
//引入vue x
import store from "./store";
 // 注意：这种方式将会导入所有组件
import NutUI from "@nutui/nutui";
// 采用按需加载时  此全局css样式，需要删除
import "@nutui/nutui/dist/style.css";
createApp(App).use(NutUI).use(store).mount("#app");

3、在store里添加数据 

4、编写代码

HelloWord.vue源码：

运行结果：