vue store的使用
五个核心:1.state -->状态树:定义需要管理的数组、对象、字符2.getter --> 类似计算属性,当需要从store的state中派生出一些状态,就需要使用getter,getter会接受state作为第一个参数,而getter的返回值会根据它的依赖缓存起来,只有getter中的依赖值发生改变才回重新计算3.mutation --> 更改sto
五个核心:
1.state -->状态树:定义需要管理的数组、对象、字符
2.getter --> 类似计算属性,当需要从store的state中派生出一些状态,就需要使用getter,getter会接受state作为第一个参数,
而getter的返回值会根据它的依赖缓存起来,只有getter中的依赖值发生改变才回重新计算
3.mutation --> 更改store中state状态的唯一方法就是提交mutation。每个mutation都有一个字符串类型的事件和一个回调函数,
我们需要改变state的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit
4.action -->action可以提交mutation,在action中可以执行store.commit,而且action中可以有任何的一步操作。在页面中如果
要使用action,则需要执行store.dispatch
5.module -->module其实只是解决了当state中很复杂臃肿的时候,module可以将store分割成模块,每个
模块中拥有自己的state,mytation,action和getter
实例操作
1.引入vuex状态管理模式 --> npm install vuex --save
2.创建store文件夹,建立store.js --> 在store.js中引入vue 和 vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import getters from 'getter.js所在位置'
import user from 'user.js所在位置'
const stroe = new Vuex.Store({
modules:{
user
},
getters
})
export default store
getter.js文件 -->
const getters = {
name: state => state.user.name,
}
export default getters
user.js文件 -->
const user = {
state:{
name: ""
},
mutations:{
setName:(state, name) =>{
state.name = name
},
actions:{
commitName({commit}, name){
commit("setName", name)
}
}
}
export default user
<script>
import store from 'store.js的路径'
data(){
return{
name:store.getters.name;//引入getters中的对象
}
},
methods:{
useAction(){
var item="张三";
store.dispatch('setName',item);
}
}
</script>
更多推荐
所有评论(0)