vue中vuex的使用（1）---引入和简单模板 vue插件的查看

vuex是啥
vuex是做数据交互的，将数据保存在特定的地方，然后各个组件都可以访问这个数据，共同修改和读取数据，以此达到数据共享的效果
结构图如下

类似于mvc文件，
actions是对组件vue components传过来的数据进行处理的，处理完毕后交给mutations，
mutations是将actions传过来的数据存储进state里
actions存储着所有的共享数据

1.如何引入？

一.引入vuex到库

npm i vuex

二.引入到vue当中
在src目录下创建一个store的文件夹，用来存放vuex的数据，创建入口文件main.js

由于必须要先引入vuex到vue才能使用配置，所以我们将Vue.use(Vuex)写在main.js文件里，同时对vuex进行简单的初始化

//该文件用于创建Vuex种最为核心的store
//引入vue
import Vue from 'vue'

//引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)


//vuex的创建
//actions-----用于响应组件中的动作
const actions ={
}
//mutations----用于操作数据
const mutations={
}

//state---存储数据
const state={
}

//创建store，同时对象重名，简写形式actions：actions, 等于actions,
const store =new Vuex.Store({
	actions,
    mutations,
    state,
})

//暴露store
export default store

三.打开main.js，将刚刚创建的vuex加入到vue实例里

//引入store(自己写的那个)
import store from './store/index'

new Vue({
  render: h => h(App),//是上面那个的缩写
  store:store,//引入vuex
 

}).$mount('#app')

这样子就创建完成了

2.如何创建一个简单放到模板
若是此时打印一下vue实例的话，就会发现多了一个$store的东西，这个就是加入到vue的vuex实例对象。
我们的所有方法都是通过读取 修改 $store里面的共享数据来进行的，
整体结构是这样子的

1. 点击事件，将数据传入到vuex的actions
2. actions 将传入的数据进行简单的处理，在将处理完毕的数据传入到mutations
3. mutations将传入的数据更新到state的共享数据里面。
4. state更新完后的数据在页面重新渲染

接下来模板需求如下，在vuex里面有一个共享数据sum，
我们可以在子组件里面对其进行+1， -1，可以设置一个定时器对他晚一秒+1，并在子组件里面将其动态显示出来
模板步骤如下
（1）创建一个子组件并显示出来（不演示）
（2）刚刚在src目录下创建的入口文件main.js（以下简写main），在其state里面添加共享数据sum

//state---存储数据
const state={
    sum:0
}

（3）在main中的mutations对象里面添加对state进行操作的对象

//mutations----用于操作数据
const mutations={
    JIA(state,value){//对sum进行加法
        state.sum+=value;
    },
    JIAN(state,value){//对sum进行减法
        state.sum-=value;
    },
}

（4）在actions里面添加一个方法，等待一秒后将数据传给mutations的JIA，让其数据加法

//准备actions-----用于响应组件中的动作
const actions ={
//等待一秒后将value传给commit的JIA函数
    jiaWait(context,value){
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    },
}

（5）在子组件中添加一个方法，当点击按钮的时候触发事件，让其直接调用this.$store的方法进行对共享数据的操作（加1 减1 等待1秒后加1）
注意，由于可以直接跳过actions 用 mutations修改state的数据，所以加1减1操作直接调用commit方法

methods:{
      increment(){         
          this.$store.commit('JIA',1)
      },
      decrement(){
          this.$store.commit('JIAN',1)
      },
      incrementWait(){
          setTimeout(()=>{
              this.$store.dispatch('jiaWait',1)
          },500)
      },
  }

（6）读取sum对象
跟上面用this.$store.dispatch(‘jiaWait’,1)一样，我们都是直接将数引入到dom树即可

<h1>{{this.$store.state.sum}}</h1>

显示效果如下

3.vue的插件如何查看
打开控制台，点击vue，再点击vuex，就会弹出vuex的控制台

每当mutations被调用的时候都会弹出被调用的方法和修改的数据