vue55 —— vuex1 初识

vuex的作用

vuex是一个专为Vuejs应用程序开发的状态管理模式

• 采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
• vuex也集成到vue的官方调试工具 devtools extension，提供如 零配置的time-travel调试，状态快照导入导出等的高级调试功能

需要在多个组件间共享的状态：

• 用户的登录状态（token），用户名称、头像、地理位置信息等
• 商品的收藏，购物车中的物品等

将这些状态信息，放在统一的地方进行保存和管理，还是响应式的

安装使用

npm install vuex --save

在src文件夹下创建 store文件夹，-> index.js
src— store — index.js:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)  // 安装
const store = new Vuex.store({
// 有以下几个属性
state:{},
mutations:{},
actions:{},
getters:{},
modules:{}
})
export default store

src — main.js:

import Vue from 'vue'
import App from './App
import store from './store'  //--------------------
new Vue({
	el: '#app',
	store,  //---------------------
	render:h=>h(App)
})

访问状态：this.$store.state.xxx
index.js:

const store = new Vuex.Store({
  state:{
    message: 52
  },

App.vue:

<template>
  <div id="app">
    <h2>App:</h2>
    <h2>{{$store.state.message}}</h2>
    <h2>Hello:</h2>
    <hello></hello>
  </div>
</template>

<script>
 import Hello from './components/HelloWorld'
export default {
  name: 'App',
  components:{
    Hello
  }
}