1.Vuex是什么?
Vuex的由来? 非关系型组件的数据共享
Vuex介绍?
详细: Vuex是一个专为 Vue.js 应用程序开发的状态管理模式 , 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简略: Vuex是采用集中式管理组件依赖共享数据的一个工具，可以解决不同组件数据共享问题
2. 使用Vuex统一管理状态的好处
① 能够在 vuex 中集中管理共享的数据，易于开发和后期维护
② 能够高效地实现组件之间的数据共享，提高开发效率
③ 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步
3.Vuex的基本使用
1. 安装 npm install vuex@next --save
2. 引入 import Vuex from "vuex"
3. 注册使用 Vue.use(Vuex)
4. 实例化一个Vuex
const store = new Vuex.Store({
// 实例化Vuex的构造函数 核心概念: state mutations actions getter module
// state 中存放的是 全局共享状态的数据
state:{
count:10, name:"pink", //定义初始数据 id:1, list:[1,2,3,4,5]
},
// 修改state必须通过mutations,是一个对象中存放修改state的方法
mutations:{
// 第一个参数是当前store的state属性
// payload 载荷 运输参数 调用mutations的时候,可以传递参数
addCount(state,payload){ state.count += payload }
},
//执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
actions:{
// 获取异步数据 context表示当前的store实例
// 可以通过context.state获取状态 ,
// context.commit来提交mutations
// context.dispatch 调用其他的action
asyncAddCount(context,params){
setTimeout(()=>{
// context.commit("addCount",params)
// context.commit("addCount",context.state.id)
context.commit("addCount",context.state.count)
},1000)
}
},
// 从store中的state中派生出一些状态，这些状态是依赖state的，此时会用到getters
getters:{
filterList: state => state.list.filter(item=>item>=3) ,
//通过**根级别**的 getters 为子模块的数据添加快捷访问是推荐的做法
token : state => state.user.token,
name: state=> state.setting.name
},
// 定义两个模块 user 和 setting
// 通过 $store.state.模块名称.属性名 来获取
module:{
user:{
state:{ token:"12345" },
getter:{ }
},
setting:{
state:{ name:"模块化简单应用" }
}
},
})
5. 关联到Vue根实例中
new Vue({ render: h => h(App), store}).$mount('#app')
3.Vuex的核心概念
3.1 state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中
1. 原始形式获取state--{{ $store.state.id }}
2. 将state属性定义在计算属性中--{{ count }}
3. mapstate辅助函数.把store中的数据映射到组件的计算属性中--{{ name }}
computed:{
count (){
return this.$store.state.count
},
// 2. 将全局数据，映射为当前组件的计算属性
...mapState(['count','name'])
},
3.2 state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成数据快照, 可以集中监控所有数据的变化。
数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步
<button @click="addFn">原始形式调用$state.commit提交给mutations
<button @click="addCount(5)">辅助函数mapMutations
methods: {
// 原始形式,$store 调用store中的mutations 提交给 mutations 里面
addFn(){
this.$store.commit("addCount",10)
},
// 2.通过从vuex中按需导入mapMutations函数, 映射为当前组件的 methods函数
...mapMutations(["addCount"]),
}
3.3 action用于处理异步任务, 如果通过异步操作变更数据，必须通过 action，但是在 action 中还是要通过触发mutation 的方式间接变更数据****
<button @click="addAsyncFn">原始调用,执行异步操作
<button @click="asyncAddCount(200)">辅助函数,执行异步操作
methods: {
// actions负责进行异步操作
addAsyncFn(){ // 调用
this.$store.dispatch("asyncAddCount",88)
},
// 2.通过从vuex中按需导入mapActions函数, 映射为当前组件的 methods函数
...mapActions(['asyncAddCount'])
}
3.4 getters可以对 Store 中已有的数据加工处理之后形成新的数据，从store 中的 state 中派生出一些状态, **类似 Vue 的计算属性。**Store 中数据发生变化，getters 的数据也会跟着变化
原始调用 {{ List }}
辅助函数 {{ filterList }}
computed:{
List(){ return this.$store.getters.filterList },
// 2. 将全局数据，映射为当前组件的计算属性
...mapGetters(["filterList"]),
},
3.5 module 模块化
如果把所有的状态都放在state中 ,当项目变的越来越大时,vuex会变得越来越难维护, Vuex 允许我们将 store 分割成 module 。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：
原始调用{{ $store.state.user.token }}
通过根级别的 getters 为子模块的数据添加快捷访问
3.6 namespaced 命名空间
未完待续...
**
**
