Vuex —— Day1
vuex概述
vuex是vue的状态管理工具，可以帮我们管理vue通用的数据（多组件共享的数据）
vuex的应用场景：
- 某个状态在很多个组件中都会使用（eg.个人信息）
- 多个组件共同维护一份数据（eg.购物车）
如果没有vuex，当我们遇到一些通用数据的场景，那原本的数据传递就会是：子传父、父传子；中间会经历大量的组件通信
但有了vuex之后，通用数据直接存到仓库里，将来任何组件都可以直接拿来用
优势：
- 共同维护一份数据，数据集中化管理
- 响应式变化 —— 任何一个组件对数据进行了修改，一旦vuex里的数据变化了，所有用到这个数据的地方都会立刻响应式更新
构建vuex多组件数据共享环境
目标：实现三个组件共享同一份数据 —— 任一组件都可修改数据；三个组件的数据同步
创建项目：vue create vuex-demo
其余
创建三个组件：（components文件夹下）App.vue、Son1.vue、Son2.vue
App.vue
<template><div id="app"><h1>根组件</h1><input type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'export default {name: 'app',data: function () {return {}},components: {Son1,Son2}
}
</script><style>
#app {width: 600px;margin: 20px auto;border: 3px solid #ccc;border-radius: 3px;padding: 10px;
}
</style>
Son1.vue
<template><div class="box"><h2>Son1 子组件</h2>从vuex中获取的值: <label></label><br><button>值 + 1</button></div>
</template><script>
export default {name: 'Son1Com'
}
</script><style lang="css" scoped>
.box{border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>Son2.vue
<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值:<label></label><br /><button>值 - 1</button></div>
</template><script>
export default {name: 'Son2Com'
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>
创建一个空仓库
目标：安装vuex插件，初始化一个空仓库
步骤：
- 安装vuex
yarn add vuex@3
- 新建vuex模块文件
store/index.js 专门用于存放vuex
- 创建仓库
//vuex也是vue的插件, 需要use一下, 进行插件的安装初始化
Vue.use(Vuex)
//创建仓库
new Vuex.Store()
- main.js导入挂载
挂载到Vue实例上
验证仓库是否建成： this.$store
vue的this.$ 常见的用法_vue.js_深度学习研究员-GitCode 开源社区
Vue.js 中，
this.$用于访问 Vue 实例的一些内置属性、方法或者插件提供的功能
一旦仓库建完后，所有组件都能访问到这个仓库
state状态
- 提供数据
所有共享的数据都要统一放到Store中的State中存储；在state对象中可以添加我们想要共享的数据
//创建仓库
const store = new Vuex.Store({state:{//所有组件共享的数据；区别于data —— 组件自己的数据count:101}
})- 使用数据
通过store直接访问
获取仓库 —— this.$store / import 导入 store
模板中：{{$store.state.xxx}}
组件逻辑中：this.$store.state.xxx
JS模块中：store.state.xxx
效果展示：
完整代码：
App.vue
<template><div id="app"><h1>根组件 - {{ $store.state.title }} - {{ $store.state.count }}</h1><input type="text"><Son1></Son1><hr><Son2></Son2></div>
</template><script>
import Son1 from './components/Son1.vue'
import Son2 from './components/Son2.vue'export default {name: 'app',created () {console.log(this.$store.state.count)},data: function () {return {}},components: {Son1,Son2}
}
</script><style>
#app {width: 600px;margin: 20px auto;border: 3px solid #ccc;border-radius: 3px;padding: 10px;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import store from '@/store/index'// 导入得到仓库
// 通过仓库访问状态
console.log(store.state.count)Vue.config.productionTip = falsenew Vue({render: h => h(App),store
}).$mount('#app')
components/Son1.vue
<template><div class="box"><h2>Son1 子组件</h2>从vuex中获取的值: <label>{{ $store.state.count }}</label><br><button>值 + 1</button></div>
</template><script>
export default {name: 'Son1Com'
}
</script><style lang="css" scoped>
.box{border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>
components/Son2.vue
<template><div class="box"><h2>Son2 子组件</h2>从vuex中获取的值:<label>{{ $store.state.count }}</label><br /><button>值 - 1</button></div>
</template><script>
export default {name: 'Son2Com'
}
</script><style lang="css" scoped>
.box {border: 3px solid #ccc;width: 400px;padding: 10px;margin: 20px;
}
h2 {margin-top: 10px;
}
</style>
store/index.js
// 存放vuex相关的核心代码
import Vue from 'vue'
import Vuex from 'vuex'// 插件安装
Vue.use(Vuex)// 创建仓库(空仓库)
const store = new Vuex.Store({// 通过state提供所有组件共享的数据state: {title: '大标题',count: 100}
})// 导出给main.js使用
export default store