Vuex的用法

一、Vuex是什么：

官方话：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

二、Vuex的几种属性：

state 存放状态
mutations state成员操作
getters 加工state成员给外界
actions 异步操作
modules 模块化状态管理

调用	方法
state	this.$store.state. xxx
getters	this.$store.getters. xxx
mutations	this.$store.cmmit（xxx）
actions	this.$store.dispatch（xxx ）

三、Vuex的用法

1、在src 下创建文件夹store；创建store.js。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        count:0
    },
     getters:{
        myCount(state){
            console.log("getter")
            return "$" + state.count
        }
    },
    mutations:{
        increment(state){
            state.count++;
        }
    }
})

2、在main.js文件中注册

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

3、Vuex在其他视图中调用 方法，和store对象

新建 demo.vue 文件

<template>
    
       <div>
               {{ count }}
               <p>
                <button @click="increment">添加</button>
              </p>
               
       </div>
  
</template>
<script type="text/javascript">
    export default{
        name:'sildebar',
        data(){
            return{
            }
        },
        methods:{
            increment(){
              this.$store.commit('increment',n)   
              //commit方法的第一个参数是要发起的mutation名称，
              后面的参数均当做额外数据传入mutation定义的方法中。
            }
        },
        computed:{
            count(){
                return this.$store.state.count
            },
        }
    }
</script>

四、Vuex提供的语法糖

当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性会有些重复和冗余。
因此，Vuex提供了四种语法糖：
mapState
mapGetters
mapMutations
mapActions

注意
mapState和mapGetter的使用只能在computed计算属性中，
mapMutations和mapActions使用的时候只能在methods中调用否则报错

四种语法糖的简单使用如下：

<template>
  <div>
      <input type="button" @click="addCount" value="OK">
      <p>{{count}}</p>
      <p>{{myCount}}</p>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations} from 'vuex'
export default {
    computed:{
        ...mapState(["count"]),
        ...mapGetters(["myCount"])
    },
    methods:{
        addCount(){
            //未使用mapState的用法
            // this.$store.commit("increment")
            //使用mapState的用法
            this.increment()
        },
        ...mapMutations(["increment"])
    }
}
</script>

<style>

</style>