vueX(使用+整理）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。直白点就是，vuex是vue存放公共数据的一个仓库，包括数据更新，修改等多种行为。
避免了组件之间传值的迭代繁琐，使数据更新修改变得更加直观简便，便于操作，

props和data和Vuex的区别。
props是存放父组件传递的数据，data是存放组件内部私有数据，Vuex是存放项目共享数据。

1.安装vueX

npm install vuex --save

src下新建文件夹 index.js / store 新建文件中新建index.js

main.js中需要引入挂载vuex

import store from './store'  // 引入vueX 此处直接写的文件夹命，因为webpack会默认选中文件夹下的 index.js文件。

实例化中引入注册store

store/ index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  // state存数据相当于组件中的data
  // 如果组件中，想要访问store中数据，只能通过this.$store.state.键名，来访问。
  state: {
    count: 10,
  }, 
  //mutations 存方法 相当于组件中的 methods
  //如果想操作store中state值，只能通过调用mutations提供的方法才能操作对应数据，不推荐直接操作state中数据，
  mutations: {
    // 调用方法，如果想调用 mutations 中方法，只能使用 this.$store.commit("方法名");
    increment(state){
      state.count++;
    },
    instre(state,c){
      state.count-= c;
    },
  },
   
  getters: {
    //只负责对外提供数据，不负责修改数据，如果想修改state中的数据，请使用mutations，
    optCount:function(state){
      return '当前最新的count:'+state.count 
    }

  },
 
  actions: {

  },
  modules: {
  }
})

组件调用vuex里面数据

<template>
    <div class="staday">
        <!-- <h1>{{this.$store.state.count}}</h1> -->
        
        <h1>{{this.$store.getters.optCount}}</h1>
        <button @click="add">增加</button>
        <button @click="inset">减少</button>
    </div>
</template>
<script>
/**  VueX是为了保存组件之间共享数据而诞生的，如果组件之间有共享的数据，可直接挂载到VueX中，而不必通过父子组件之间传值了，
 * 如果组件的数据不需要共享，此时这些不需要共享的私有数据，就没必要放到vueX中，
       */
export default {
    name:'staday',
    data(){
        return{
            c:2
        }
    },
    methods:{
        add(){
            this.$store.commit('increment');   // 调用vuex里面增加的方法。
        },
        inset(){                                           // 调用vuex里面减少的方法
            this.$store.commit('instre',this.c)    // 给instre传递一个变动的参数。
        }
    },
    mounted(){
    }
}
</script>>
<style lang="scss" scoped>
   .staday{

   }
</style>

知识整理了一些基础的方法和知识，希望能给大家带来点帮助。