1、我们使用vue-cli创建一个名为vuex-app
的vue项目
2、安装vuex方式有很多,我们这里基于vue-cli,使用npm安装,安装指令如下:
npm install vuex --save
1、在src
目录下新建store
目录,在store
下新建index.js
,代码如下:
import Vue from 'vue' // 导入vuex import Vuex from 'vuex' //挂载Vuex Vue.use(Vuex) //创建Vuex对象 const store = new Vuex.Store({ state:{ //存放的键值对就是所要管理的状态,类似于vue实例中的data name:'hello vuex' } }) // 默认导出store export default store
提示:
1、每一个 Vuex 应用的核心就是
1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
1、每一个 Vuex 应用的核心就是
store
(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同:1)Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。
2)你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用
2、将store挂载到当前项目的Vue实例当中去,修改main.js
如下:
import Vue from 'vue' import App from './App.vue' // 导入store import store from './store' Vue.config.productionTip = false new Vue({ render: h => h(App), // store:store 和router一样,将我们创建的Vuex实例挂载到这个vue实例中 store }).$mount('#app')
3、在组件中使用Vuex,这里我们在components
中新建StoreDemo.vue
中使用,代码如下:
<template> <div> <!-- 1、在模板中获取store中的状态 --> <h1>{{$store.state.name}}</h1> <!-- 2、在方法中获取store中的状态 --> <button @click="handleClick">获取</button> <!-- 3、使用计算属性获取 --> <h2>{{name}}</h2> </div> </template> <script> export default { methods:{ handleClick(){ // 在方法中获取要通过store,不能在此直接改变state,后面会讲 alert(this.$store.state.name); } }, // 使用计算属性获取 computed:{ name(){ return this.$store.state.name; } } } </script> <style scoped> </style>
提示:因为我们在vue实例中挂载了store,所以我们可以在任何组件中都可以使用
$store
,但是我们不能在此直接改变state,后面会讲如何去改变state4、修改
App.vue
如下:
<template> <div id="app"> <StoreDemo></StoreDemo> </div> </template> <script> import StoreDemo from './components/StoreDemo.vue' export default { name: 'app', components: { StoreDemo } } </script> <style> </style>