五个核心:
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>

Logo

前往低代码交流专区

更多推荐