Vuex学习（1）

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状

态，并以相应的规则保证状态以一种可预测的方式发生变化

当有一些公共的数据需要影响到多个组件的时候就需要用到vuex了。

使用Vuex管理数据的好处：

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

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

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

传统的组件传值都是通过porps和$emit来进行传值，如果需要不同页面的组件进行数据交互就无能为力了

1、使用Vuex

安装

npm install vuex

安装后需要在src目录下创建store目录其中新建一个index.js文件

创建完后需要在index.js中引入vue和vuex

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

2、vuex --store公共数据

引入

为了在 Vue 组件中访问 this.$store property，你需要为 Vue 实例提供创建好的 store。Vuex 提供

了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制：

在main.js中加入

import store from './store'
//在new vue中也加入
store,

在store/index.js文件中，创建store常量

const store = new Vuex.Store({
//定义一些公共数据。可在多个组件使用
state:{
count:0
},
//方法集类似子传父中$emit调用一个方法另一个方法在调用一个方法。
mutations:{
add(state){
state.count++
},
sub(state){
state.count--
}
}

在vue文件中

//可以在methos中创建一个方法来调用
methods:{
    //这里调用的add和sub是store/index.js中的mutations里面的方法当VueAdd事件触发就会让store/index.js中的add触发从而达到不同组件操作同一数据的问题
    VueAdd(){
        this.$store.commit('add')
    },
    VueSub(){
        this.$store.commit('sub')
    }
}

//如果在组件中使用state中的值如下
<p>{{$store.state.count}} </p>
问题：有些长影响美观

总结：

• 多个组件需要使用的数据就在store中定义
• 多个组件都需要用到的数据就在store中获取
• State提供唯一的公共数据源，所有共享的数据都要统一放到Store中的State中存储

3、使用计算属性来解决组件中使用state值太长的问题

//store中的state中定义了name和price

computed:{
    name1(){
        return this.$store.state.name
    },
    price2(){
        return this.$store.state.price
    }
}
//这个时候就可以在组件中这样使用了
<P>{{name1}}--{{name2}}</p>
                ↓
                简写
                ↓
<template> 
  <div class="container">{{ name1 }}--{{ price1 }}</div> 
</template> 
<script> 
      //引入mapstate辅助函数
      import { mapState } from 'vuex' 
export default { 
    computed: mapState({ 
        //使用箭头函数时，可以省略 this.$store，而是直接使用 state
        name1: state => state.name, 
        price1: state => state.price 
    }) 
}
</script>

简化最终版本

<template> 
    <div class="container">{{ name }}--{{ price }}</div> 
</template> 
<script> 
  import { mapState } from 'vuex' 
export default {
    //computed是个对象所以mapstate的返回值一定是两个对象
    //一个叫name的对象一个叫price的对象
    
    computed:{
    count () { return 5 },
    mapState(['name', 'price']) 
}
</script>

4、展开运算符

展开运算符语法

...

使用方法

let array=[1，2，3，4，5，6]//数组Array
console.log(...array)//1,2,3,4,5,6//字符串string

let str=...array//报错不可以这样写
let str={...array}//允许
let str=[...array]//允许

这时就可以将

computed: mapState(['name', 'price']) }改写为
computed: { ...mapState(['name', 'price']) },

虽然看起来代码更加繁琐了但是，他的优点在于可以将mapstae的计算属性和原本组件中的计算属性进行混合使用。