vuex的简单实用

首先新建一个store文件夹，里面放入index.js文件

import { createStore } from "vuex"

const store = createStore({
    state () {
      return {
        task:{},
      }
    },
    mutations: {
      getTask(state,task){
        state.task=task
    },
  }

})
 
export default store

这段代码是用 Vue 3 和 Vuex 创建一个状态管理的 store。让我来解释一下：

1. import { createStore } from "vuex":

   • 这一行导入了 createStore 方法，它是用于创建 Vuex store 的函数。

2. const store = createStore({ ... }):

   • 使用 createStore 创建了一个 Vuex store 实例，该实例包含了状态 (state) 和状态变更的方法 (mutations)。

3. state() { return { task:{} } }:

   • 这个函数定义了 store 的初始状态。在这里，state 函数返回一个对象，其中有一个 task 属性，初始值是一个空对象 {}。

4. mutations 对象:

   • mutations 是用来修改状态的方法集合。在这个例子中，只有一个 getTask 方法。
   • getTask 方法用于更新 state 中的 task 属性。它接收两个参数：state 和 task。当该方法被调用时，它会把 state.task 设置为传入的 task 参数的值。

5. export default store:

   • 最后，通过 export 将创建的 store 实例暴露出去，以便在 Vue 应用的其他组件中使用。

这段代码创建了一个简单的 Vuex store，其中包含一个状态 task 和一个 mutation 方法 getTask，用于更新 task 状态。这样的结构可以在 Vue 组件中通过 Vuex 的辅助函数或者指令来访问和修改这个状态。

在main.js中这样子写

import { createApp } from 'vue';
import App from './App.vue';
import store from './store/index'; // 导入Vuex Store

const app = createApp(App);
app.use(store); // 使用Vuex Store

app.mount('#app'); // 挂载Vue应用程序到指定的元素

回到app.vue文件，内容如下

<template>
<input v-model="name">
<button @click="vuexstorage">vuex存储数据</button>
<button @click="vuexhave">vuex读取数据</button>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      name : "小明"
    }

  },
  methods:{
    vuexstorage(){
      this.$store.commit('getTask',this.name)
    },
    vuexhave(){
      console.log(this.$store.state.task)
    }
  }
}
</script>

这段代码是在 Vue 组件中的两个方法，名为 vuexstorage 和 vuexhave。让我来解释一下：

1. vuexstorage() 方法:

   • 这个方法通过 Vuex 的 $store 对象调用 commit 方法，触发了名为 getTask 的 mutation。
   • 在这个例子中，getTask mutation 用来更新 Vuex store 中的 task 状态。
   • 它的实际操作是将组件中的 this.name 值提交给 Vuex store 的 getTask mutation，来更新 task 状态。这个方法假设 this.name 中包含了需要更新的任务数据。

2. vuexhave() 方法:

   • 这个方法通过 Vuex 的 $store 对象访问了 state 中的 task 属性。
   • 使用 console.log 打印出了 this.$store.state.task 的值，即 Vuex store 中 task 的当前状态。

总的来说，vuexstorage 方法用于更新 Vuex store 中的 task 状态，而 vuexhave 方法用于在控制台输出当前 task 的状态值，以便进行调试或者验证。