vuex

生命周期

1.创建生命周期

var app=new vue({})

2.初始化事件

Dom对象：el: undefined

data对象: data: undefined

声明的变量:message: undefined

DOM对象:el: undefined

data对象:data : [object Object]

声明的变量: message: "Vue的生命周期”

挂载

可以这样写

var app=new vue({
  el: 'app'
})

也可以这样写

var app=new vue({
}).$mount('#app')

如果有template模板就输出，如果没有就输出el里的内容

钩子函数

beforeCreate和created

<div id="app">
  <p>{{userName}}</p>
  <p>{{passWord}}</p>
</div>
<script>
 var app= new Vue({
   el: "#app',
   data:  {
     userName :'',
     passWord:''
  },
  methods: . {
   handleClick() {
   }
 },
 beforeCreate() {
   console.log ('beforeCreate');
  },
 created() {
    console.log( 'created');
 }
})
</script>

结果：beforeCreate
created

如果只写到这里仅仅是在内存中生成了虚拟dom而没有实际内容

beforeMount

mounted

beforeUpdate和update

vuex

Vuex是-个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

使用Vuex管理数据的好处:

●能够在vuex中集中管理共享的数据，便于开发和后期进行维护

●能够高效的实现组件之间的数据共享，提高开发效率

●存储在vuex中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

计数器

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
// 这里不要忘了引用插件
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
 count: 0
},
mutations: {
 increment (state) {
  state.count++
 },
 reduction (state) {
  state.count--
 }
}
})
export default store

Addition.vue

<template>
<div class="main">
 <h3>变量 count 的值为：{{ $store.state.count }}</h3>
 <button @click="add">+1</button>
</div>
</template>
<script>
export default {
methods: {
 add () {
  this.$store.commit('increment')
 }
}
}
</script>

Subtraction.vue

<template>
<div class="main">
 <h3>变量 count 的值为：{{ $store.state.count }}</h3>
 <button @click="sub">-1</button>
</div>
</template>
<script>
export default {
methods: {
 sub () {
  this.$store.commit('reduction')
 }
}
}
</script>

State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储
vuex 中的 state 相当于组件中的 data
State中的数据与组件 data 中的数据一样，也是响应式的

import Vue from 'vue'
import Vuex from 'vuex'
// 这里不要忘了引用插件
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
 name: '美的冰箱',
 price: 120
}
})
export default store

组件中使用 state

在组件中访问 state 中变量，模板中直接使用 $store.state.属性名称获取

<template>
<div class="container">
 {{ $store.state.name }}
</div>
</template>

计算属性

<template>
<div class="container">{{ name1 }}--{{ price1 }}</div>
</template>
<script>
export default {
computed: {
 name1 () {
  return this.$store.state.name
 },
 price1 () {
  return this.$store.state.price
 }
}
}
</script>

辅助函数

<template>
<div class="container">{{ name }}--{{ price }}</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed: mapState(['name', 'price'])
}
</script>

Getter

<template>
<div class="container">
 <p>{{ doneTodos }}}}</p>
 <p>{{ todos }}</p>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
computed: {
 ...mapGetters(['doneTodos']), // 导入 getters
 ...mapState(['todos']) // 导入 state
}
}
</script>