Vuex介绍
Vuex是专为 Vue.js 设计 的状态管理模式,他可以集中式存储和管理应用程序中所有组件的状态,避免了多个组件内互相传递变量,集中统一方便管理Vuex的使用流程
1.安装 Vuex:
npm install vuex || yarn add vuex //两种方式都可以
2.创建文件
在 /src 目录下，创建一个名为 store 的目录 在该目录中设置一个index.js文件作为出口
具体引用步骤:
import Vue from "vue"
//然后引入下好的vuex包
import Vuex from "vuex"
//把vuex挂载到Vue上
Vue.use(Vuex)
//创建Vuex.Store的实例
const store = new Vuex.Store({
// 各种配置(类似于data,methods,computed....)
// state就对应理解为组件中data 定义公共变量的地方
state: {
num: 100//这就是一个公共变量
},
})
// 3. 导出store实例
export default store
在 main.js文件下引入:
import Vue from 'vue'
import App from './App.vue'
// 在入口文件中引入store
import store from './store/index.js'
Vue.config.productionTip = false
// 挂载到vue的实例上
new Vue({
store: store,
render: h => h(App),
}).$mount('#app')
3.vuex中的属性
new Vuex.Store({
state:{},
geeter:{
//是vuex中的计算属性,存放从基本数据(state)派生的数据
},
mutations:{
// 函数名可以是任意合法的函数名
// 参数1：表示当前state
// 参数2：可选。它表示调用函数1时，传入的参数。
函数名1(参数1,参数2){
// 在函数内部，修改state中的数据
}
},
actions:{
// context类似于$store对象
// payload是传过来的参数值
// 必须在actions里提交mutations来触发state更新(规定)
asyncSubNum(context, payload){
// 可以加入异步任务后, -> 触发mutations -> 修改state
setTimeout(() => {
context.commit("subNumFn", payload);
}, 1000);
}
},
modules:{
//存放模块名
//模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理
}
})
4.使用vuex中的变量
方法1：调用导出的store对象使用
模板中使用变量：`{{ $store.state.变量名 }}`
vue页面配置项中：
未定义模块时
--调用state属性中变量:`this.$store.state.num`
--调用mutations属性中方法: `this.$store.commit('函数名',要传入的值)`
--调用actions属性中异步方法: `this.$store.dispatch('函数名',要传入的值)`
定义模块后
--调用state属性中变量:`this.$store.state.模块名.num`
--调用mutations属性中方法: `this.$store.commit('模块名/函数名',要传入的值)`
--调用actions属性中异步方法: `this.$store.dispatch('模块名/函数名',要传入的值)`
js页面中:
首先引入导出的store对象: import store from './store/index.js'
未定义模块时
--调用state属性中变量:`store.state.num`
--调用mutations属性中方法: `store.commit('函数名',要传入的值)`
--调用actions属性中异步方法: `store.dispatch('函数名',要传入的值)`
定义模块后
--调用state属性中变量:`store.state.模块名.num`
--调用mutations属性中方法: `store.commit('模块名/函数名',要传入的值)`
--调用actions属性中异步方法: `store.dispatch('模块名/函数名',要传入的值)`
当前vuex中调用其他属性或方法:
//vuex推荐在mutation属性中修改store.js中的数据，而不是利用$store修改
//通过这种方式操作起来稍微繁琐一些，但是可以集中监控所有数据的变化
mutations:{
合法的函数名(state,参数){
//第一个参数名推荐state,语义化清晰,相当于映射state属性到mutations函数中通过state使用变量,
//参数
//修改state中数据的语法:
state.变量名 = ... (进行任意操作)
}
},
actions:{
async 方法名(context,参数){
//参数1 context类似于$store对象
//参数2 为传进来的任意参数值
//如果想要使用mutations中的方法
//语法:
context.commit('mutations中方法名',参数)
//不需要模块名,因为本身就在当前模块调用
//想使用actions中的方法
context.dispatch('actions中方法名',参数)
//使用其他模块方法只需要在方法名前追加一个模块名
context.commit('模块名/mutations中方法名',参数)
context.dispatch('模块名/actions中方法名',参数)
}
},
***注意,定义模块后需要设置namespace = true,开启命名空间,开启后调用相同的方法或变量名字需要携带模块名,避免名字相同引起混乱
方法2:map映射使用
映射关系:
mapState > computed
mapGetters > computed
mapMutations > methods
mapActions > methods
使用步骤
未定义模块
1. 组件中按需导入mapState函数：
`import { mapState } from 'vuex'`
`import { mapMutations } from 'vuex'`
`import { mapGetters } from 'vuex'`
`import { mapActions } from 'vuex'`
2. 将vuex中数据或方法映射：
`computed:{ ...mapState(['state中的变量名','多个用逗号隔开']) }`
`computed`{ ...mapGetters(['Getters中的变量名'])}
`methods:{ ...mapMutations(['mutations中的方法名'])} `
`methodus`:{ ...mapActions(['actions中的方法名'])}
3. 把映射到组件内的数据当成一般计算属性使用
定义模块后
只需在变量名或方法名之前添加 模块名 就可以
例子:computed:{ ...mapState('user'['state中的变量名','多个用逗号隔开']) }`
// ...mapActions('user', ['login']) //为了避免和状态值重名，也可以使用完整路径，如下
...mapActions(['user/login'])
// 在使用的时候
this['user/login']('admin').then(res => {})
以上就是我的总结,不足的地方希望能够指正
