这里是我创建的store代码
// 引入Vue构造函数
import Vue from "vue"
//引入 vuex
import vuex from "vuex"
//将vuex挂载到vue
Vue.use(vuex);
//创建仓库
var store =new vuex.Store({
state:{
//定义状态 title属性
title:"hello world"
}
})
//导出创建的仓库
export default store
这里是main.js的文件
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
//引入 创建的store仓库
import store from "./store";
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
//将store挂载到vue
store,
components: { App },
template: '<App/>'
})
这是组件使用mapState的笔记
<template>
<div>
<!-- 这里直接输出title 它是mapState中定义的属性title，它的值是store仓库的值-->
{{title}}
</div>
</template>
<script>
//引入vuex提供的辅助函数 mapState ***抽象形容:mapState是state的语法糖
//官方的解释：mapState 辅助函数 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：
import {mapState} from "vuex"
export default {
name: "Home",
//为什么mapstate写在computed里面呢 computed:计算机属性 当依赖的属性发生改变就会执行
computed:{
// ...对象展开运算符 ==>ES6提供的
...mapState({
//第一个title代表当前组件的属性 "title"代表仓库的属性
title:"title"
})
}
}
</script>
<style scoped>
</style>
语法就是写的不要问那么多 *那你可以针是一个杠精
官方的文档地址 https://vuex.vuejs.org/zh/guide/state.html
