vue学习-vuex状态

• vuex开启了中央集权制，君主专制

知识点
## vuex是什么
是vue程序开发的状态管理模式，集中式管理存储所有组件的状态
vuex是相当于所有组件的君主，都得听他的话，都得交给他管理，组件之间通过君主可以实现交互，并不会受限于关系
##引入vuex
cdn链接 <script src="https://unpkg.com/vuex">
npm安装 npm install vuex --save 
在模块化中必须通过vue.use()来安装vuex
import Vuex from 'vuex'
Vue.use(Vuex)
安装兼容处理 因为vuex依赖于promise 一些浏览器不支持promise 
npm install es6-promise --save
最后在引入vuex之前引入import 'es6-promise/auto'
## 创建项目
vue create vue-vuex-demo
cd vue-vuex-demo
cnpm install --save vuex
npm run vue-vuex-demo
##  vuex的使用
 vuex的核心主要就是store仓库，store可以看做是一个仓库，里面存放着组件的状态，
 注意：vuex中的状态是响应式的，当组件从store中读取状态时，若store中的状态发生了改变，那么相对应的组件也会去发生改变，
 vuex中仅且只有一个store仓库，是所有组件共享的store仓库
##在mian.js中的操作步骤
1 引入vuex插件 导入到vue的依赖中 import 引入  Vue.use() 导入依赖
2 创建store容器  new Vuex.store(state{})  
3 存放到vue实例中

• 示例

=====mian.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import Vuex from 'vuex'
// 将vuex插件放到vue依赖中
Vue.use(Vuex)
Vue.config.productionTip = false

// 创建Store容器
const store = new Vuex.Store({
  state:{
    count:100
  }
})
// 把创建好的store容器存放到vue实例中这样才能调用 这样就是全局容器了
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
======组件调用
 <p id="one">vuex中store容器中的值：{{$store.state.count}}</p>

• 全局对象创建

## 全局对象和vuex
1 创建全局对象
在main.js中创建Vue.prototype.$hello = 'value'
任意组件可以获取全局变量 $hello 

• vuex中store容器中state状态中数据的读取方式

## vuex核心概念
state状态
getters 读取数据
mutaions 修改数据或是计算
actions 异步操作的
modules 容器对状态进行规化
## vuex是一个君主专制的机制
vuex是用一个对象包含了所有组件的状态，也就是说一个应用中只有一个store实例，
## 读取vuex中store容器中的数据
1 不推荐在template中直接获取，而是使用computed对象来获取 创建函函数来获取
2 采用vuex中自带的mapState函数来获取store容器中的数据 在computed对象中使用
...mapState(["key"])通过key来获取
======页面
<template>
  <div class="home">
   
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    <p>直接获取啊++{{$store.state.count}}</p>
    <!-- <p>computed方法获取{{getCount}}</p> -->
    <p>vuex中方法获取{{count}}</p>

  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import {mapState} from 'vuex'
export default {
  name: 'Home',
  data(){
    return{
      
    }
  },
  components: {
    HelloWorld
  },
  // computed:{
  //   getCount(){
  //      return this.$store.state.count
  //   }
  // },
  computed:{
    ...mapState(["count"])
  }
}
</script>

• vue中mutation
• 知识点

## mutation
vue中store容器中的start是可以修改的，一个组件修改了start时其他引用到的组件也会同步进行更新
修改vuex中的store容器中的状态唯一方法是mutations,
首先要在vuex中的store容器中mutations模块中定义能够修改start中数据对应的方法，
然后在组件中methodes对象中定义方法，在方法中通过$store.commit方法将对应修改方法作为参数传给commit方法，意思就是通过commit才可以调用mutations中的方法
注意mutation不要做异步请求
当然vuex中提供了更加方便的操作
vuex提供了mapMutations方法
在methods对象中使用...mapMutations方法来指定执行获取的方法
然后后在方法中通过this来调用传过来的方法

• 示例

index，js中定义方法
export default new Vuex.Store({
  state: {
    count:100
  },
  mutations: {
    addCount(state){
        state.count += 1;
    },
    minCount(state){
      state.count -= 1;
    }
  },
-- 展示组件
<template>
  <div class="about">
    <h3>我是about页面</h3>
    <button v-on:click="addHandle">增加</button>
    <button @click="minHandle">减少</button>
    <p>获取到了vuex中store容器中的start,通过mapState{{count}}</p>
  </div>
</template>
<script>
import {mapState,mapMutations} from 'vuex'
export default {
  computed:{
    ...mapState(["count"])
  },
  methods:{
    // 第一种方法是通过调用commit方法通过参数来执行指定方法
    // addHandle(){
    //   this.$store.commit("addCount")
    // },
    // minHandle(){
    //   this.$store.commit("minCount")
    // }
    // 第一种通过vuex中的mapMutations()来操作方法
    ...mapMutations(["addCount","minCount"]),
    addHandle(){
      this.addCount()
    },
    minHandle(){
      this.minCount()
    }

  }



}
</script>
<style>

</style>

• vuex中action

知识点啊
## action
作用类似于mutation,他是可以修改start中的数据，其实是通过mutation来修改的
不会是直接修改，而且之前说过唯一可以修改start中的数据值的方式是通过mutation
1区别就是action是支持异步修改
2 要想触发action函数是通过$store.dispatch(""),回忆触发 mutations需要commit()
3 在调用action中的函数通过vuex中的mapAction方法
在methods中...mapActions["函数名字"] 在使用this.函数直接调用

• 示例

-- js中
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'


Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:100,
    banner:[]
  },
  mutations: {
    addCount(state){
        state.count += 1;
    },
    minCount(state){
      state.count -= 1;
    },
    updateBanner(state,banner){
      state.banner = banner;
    }
  },
  actions: {
    ajaxbanner(context){
      // context.context("updateBanner")
      axios.get("http://iwenwiki.com/api/blueberrypai/getIndexBanner.php")
      .then(res=>{
        if(res.status === 200){
            context.commit("updateBanner",res.data.banner)
        }
      })
      .catch(error=>{
        context.commit("updateBanner",[])
      })


    }
  },
  modules: {
  }
})
--- 组件中
<template>
  <div class="about">
    <h3>我是about页面</h3>
    <button v-on:click="addHandle">增加</button>
    <button @click="minHandle">减少</button>
    <p>获取到了vuex中store容器中的start,通过mapState{{count}}</p>
    <button v-on:click="getdata">展示数据啦</button>
    <ul>
      <li v-for="(item,index) in banner" :key="index">
        {{item.title}}
      </li>
    </ul>
  </div>
</template>
<script>
import {mapState,mapMutations,mapActions} from 'vuex'
export default {
  computed:{
    ...mapState(["count","banner"])
  },
  methods:{
    // 第一种方法是通过调用commit方法通过参数来执行指定方法
    // addHandle(){
    //   this.$store.commit("addCount")
    // },
    // minHandle(){
    //   this.$store.commit("minCount")
    // }
    // 第一种通过vuex中的mapMutations()来操作方法
    ...mapMutations(["addCount","minCount"]),
    addHandle(){
      this.addCount()
    },
    minHandle(){
      this.minCount()
    },
    // 第二种调用actions中的方法
    ...mapActions(["ajaxbanner"]),
    getdata(){
      // 第一种调用action方法方式
      // this.$store.dispatch("ajaxbanner")
      this.ajaxbanner();
    }

  }



}
</script>
<style>

</style>

• getter

知识点 
getter可以获取store容器中start的数据状态，但是如果只是读取数据的话，getter并不是最优选择，使用getter可以对数据进行处理获取过滤，这样
才是实现getter方法的真正意义
第一步添加getters对象里面创建操作start中的数据的方法，有返回值
第二步通过$store.getters.方法名来获取
还可以使用辅助函数 从vuex中获取mapgetters函数 在computed中...mapgetters来调用函数，

• 示例

在js中写
getters:{
    getCount(start){
      return start.count>=100?"高寿"+start.count:"少年"+start.count
    }
  }
 === 组件中
 <!-- 方式一 -->
    <p>直接读取{{$store.getters.getCount}}</p>
    <!-- 方式二 -->
    <p>方式二 {{getCount}}</p> 
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
computed:{
    ...mapState(["count","banner"]),
    ...mapGetters(["getCount"])
  },