Vuex--全局共享数据

07-19 1344阅读

一是什么?

二怎么用？

三注意点

一是什么?

在此之前，我们使用vue的数据全部放在每个组件的data区域里面，这里return里面存的都是这个组件要用到的数据，但是这里面的数据是局部的数据，也就是说这些数据是这个组件专用的，其他组件是用不了它的数据的。

但是，为了方便，我么往往多个组件需要共享一些数据，所以vuex的作用就是用于存放一些公共数据，这样所有的组件都可以往这里面取需要的数据。

二怎么用？

① 终端下载vuex

② 在main.js文件中导入并且挂载store

③ 创建一个文件夹store，在该文件夹下面创建一个index.js文件

④ 在index.js文件中定义相关数据并且暴露store（这里提供一个相关模板）

// 导入函数
import { createStore } from "vuex";
// 定义一个状态
const state = {
    count:0,
    user:{
        id:0,
        username:'张三',
        age:13
    }
}
// 修改状态的函数集合 , 不能异步调用
const mutations = {
    addCount(state,payload){
        // 修改state里面的count状态
        state.count+=payload.num ; 
    }
}
// actons : 操作函数集合（定义事件，让组件触发事件）
const actions = {
    increment(context,payload){
        // 发送ajax请求，异步通信
        // 它只能调用mutations里面的方法才能修改数据,三个核心对象各司其职(主要是因为mutation不能异步调用,而actions可以,所以我们用actions去调用mutations)
        context.commit('addCount' , payload)
    }
}
// 调用createStore创建Store对象
const store = createStore({
    state , 
    mutations,
    actions
})
// 暴露store对象
export default store  //把它挂在到mian.js中去，就可以全局使用它

⑤ 引入并且修改相关数据实现代码步骤：

1.先引入vuex中的数据count ，这就已经可以直接获取到数据了