Vuex 学习

文末有git 地址

安装vuex

npm install vuex@3

创建文件 store.index.js

// 创建仓库
import Vue from 'vue'
import Vuex from 'vuex'
// 将 Vuex 注册到 Vue 中，以便在组件中使用 Vuex 的功能
Vue.use(Vuex)

// 创建一个 Vuex 存储对象（即仓库）
const store = new Vuex.Store({
    // 定义了状态数据
  state: {
    // 是一个初始值为 0 的计数器
    count: 0
  },
//   定义了变更状态的方法
  mutations: {
    // 这里的 increment 方法用于将计数器加 1
    increment (state) {
      state.count++
    }
  }
})

export default store

将main.js 文件内容修改为如下

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 将从 './store' 导入的 store 对象赋值给 Vue 实例的 store 属性
  // 这样，在组件中就可以通过 this.$store 来访问和使用这个存储对象中的状态和相关的操作方法，
  // 实现了状态管理的功能。
  store:store
}).$mount('#app')

将App.vue 文件内容修改为如下

<template>
  <div id="app">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

将HelloWorld.vue 文件内容修改为如下

<template>
<div>
  <!-- 调用仓库里面的状态数据count -->
  {{ this.$store.state.count }}
  <button @click="add">+1</button>
</div>

</template>

<script>
export default {
  name: 'HelloWorld',
  methods:{
    add(){
      // 通过提交到仓库里面进行+1操作
      this.$store.commit("increment")
    }
  }
}
</script>

计算属性返回某个状态

在HelloWorld.vue 代码中添加，并注释如下代码

<template>
<div>
  <!-- 调用仓库里面的状态数据count -->
  <!-- {{ this.$store.state.count }} -->
  {{ count }}
  <button @click="add">+1</button>
</div>

</template>

<script>
export default {
  name: 'HelloWorld',
  // 通过计算属性直接获得值，不必写的过于麻烦
  computed:{
    count(){
      return this.$store.state.count
    }
  },
  methods:{
    add(){
      // 通过提交到仓库里面进行+1操作
      this.$store.commit("increment")
    }
  }
}
</script>

更加简便的方法为如下

  // 更加简便的方法
  computed:mapState([
    'count'
  ]),

点击尝试

git地址：GitHub - lz020214/vuex

感谢各位的点赞收藏