1.npm安装vuex
npm i vuex -s
2.创建文件
在项目根目录创建 store/index.js
3.初始化文件store/index.js中的内容
import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({
state:{
//存放的键值对就是所要管理的状态
name:'helloVueX'
}
})
export default store
4.将store挂载到当前项目的Vue实例当中去
import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
store, //store:store 和router一样,将我们创建的Vuex实例挂载到这个vue实例中
render: h => h(App)
}).$mount('#app')
使用
console.log(this.$store.state.name)
<h1>{{ $store.state.name }}</h1>
核心成员:
- state 存放状态
- mutations state成员操作
- getters 加工state成员给外界
- actions 异步操作
- modules 模块化状态管理