关于vue中的vuex

vuex

vuex的数据声明以及方法调用都在 stroe文件夹下的index.js进行声明

state

vuex中的state类似于我们平时使用的data 用于存储数据 这里存储的数据是公共的

其他组件如何使用vuex的数据 – 使用$store对象来使用vuex数据

state:{
    num:10 -- 声明数据
}

组件中使用
方法一文本插值直接使用:{{$store,state.num}}

方法二在组件中使用计算属性进行处理
computed:{
    num(){
		return this.$store.state.num
    }
}

getters

vuex中的getters类似于computed计算属性 getters在值没有改变的时候 也会将数据缓存 发生改变后在重新执行

计算属性 – 如果值没有发生改变只调用一次 并把值缓存起来

getters:{
    方法名1(){ -- 这里会有一个形参  这个形参就是state中的数据
        return state.num *2
    }
}

组件中的使用
方法一文本插值直接使用: {{$store.getters.方法名1}}

方法二在组件中使用计算属性进行处理
computed:{
    方法名(){
        return this.$store.getters.方法名1
    }
}

mutations

对state数据进行修改

mutations:{
    在这里声明修改state数据方法
    方法名2(state,payload){
        修改方法代码
        state -- state对象 里面存储的数之前声明的数据
        payload -- 接组件中传过来的要修改值
    }
}

组件中的使用
methods:{
    方法名3(){
        this.$store.commit('vuex中的修改方法名','要修改的值')
    }
}

在组件中触发 方法3 执行修改方法 修改方法将state数据进行修改

actions

actions类似于mutations 不同在于 actions中可以支持异步(在该方法中提交的mutation 而不是直接修改)

mutations:{
    方法名2(state,payload){}
}
actions:{
    方法名4(context,payload){
        context是一个对象 其中包含了 commit 和 state
        要写的代码
    }
    简单写法
    方法名4({commit,state},payload){
        不写context直接通过解构赋值方式写自己想要的参数
        想要写的代码
    }
}

组件中的使用
methods:{
    this.$store.dispatch('异步方法中的方法名','要传递的参数')
}

辅助函数

如果需要处理比较多 在组件中操作起来比较麻烦这时候 我们可以使用辅助函数帮我们处理比较复杂的数据

辅助函数是帮我们处理数据的 所以需要写在组件中

使用方法:
在使用辅助函数之前,先要在相应的组件内引入辅助函数
import {mapState,mapGetters,mapMuntations,mapActions} from 'vuex'
注:辅助函数即使是写一个的时候,也是需要大括号的

...mapState(['变量1','变量2',...])
页面渲染 {{变量1}} {{变量2}}

..mapGetters(['方法名1'])
页面渲染  {{方法名1}}

..mapMutations(['方法名2'])
methods:{
    fun1(){
        this.方法名2('要传递的参数')
    }
}
页面渲染 <元素 @事件名="fun1()">调用1</元素>

...mapActions(['方法名3'])
methods:{
    fun2(){
        this.方法名3('要传递的参数')
    }
}
页面渲染 <元素 @事件名="fun2()"></元素>

modules模块化

在模块化之前先在store下建立新文件夹 来存放vuex里其它方法

举个栗子:

新创建文件夹 add 下创建index,js文件

add 下的 index.js文件

export default({
    namespaced:true,
    这是命名空间 值为true的时候可以在store中吧当前文件夹名(add)
    当做模块使用
    state: {
        num:120,
        title:'这是一个就离谱的标题'
      },
      getters:{
        che(state){
          return state.num*2
        }
      },
      mutations: {
        che1(state,payload){
            state.num+=payload
        }
      },
      actions: {
        che2({commit},payload){
          // console.log('我被执行了');
          // console.log(context);
          setTimeout(()=>{
              commit('che1',payload)
          },1000)
        }
      }
})

store文件夹下的index文件

先引入add模块
import add from './add'
modules:{
    add
}

在相应组件写内容

computed:{
    ...mapState({自定义键名1:state=>state.add.变量1}),
	...mapGetters({自定义键名2:'add/方法名1'})
}
页面渲染
{{自定义键名1}}  {{自定义键名2}}

methods:{
    ...mapMutations({自定义键名3:'add/che1'}),
    fun1(){
        this.自定义键名3('传递的值')
    },
    ...mapActions({自定义键名4:'add/che2'}),
    fun2(){
        this.自定义键名4('传递的值')
    }
}
页面渲染
<元素 @事件名="fun1()"></元素>
<元素 @事件名="fun2()"></元素>

更详细的拆分

vuex还可以将其方法进行拆分 同时也可以将方法名变成变量

举个栗子:

方法的更近一步拆分

add文件下的操作:

index.js

将相应的属性拆分成相应的页面 页面命名应见名知意 拆分完成 就引入当前的js文件
import state from './state'
import getters from './getters'
import mutations from './mutations'
import actions from './actions'
export default({
    namespaced:true,
    state,
    getters,
    mutations,
    actions
})

将方法名变成可以变的

在store文件夹下创建新js文件 来存储方法名 这里我就创建个mc.js文件
exprot const 自定义变量名(需要全部大写) = "要变成可修改的方法名"

需要修改的文件 
将相应的拆分出属性文件修改内容
引入:
import mc.js文件下的自定义变量名 from 'mc文件的路径'
使用:这里一定要用中括号
export default({
    [mc.js文件下的自定义变量名](){
       需要写的代码
    }
})

相应的组件
引入:
import mc.js文件下的自定义变量名 from 'mc文件的路径'

使用:
直接写 mc.js文件下的自定义变量名 什么都不加
遇到字符串用加号链接即可