Vuex 的概念与应用

vuex的概念详解

vuex的几个状态和属性

• modules：模块化 vuex
• state 中保存着共有数据，数据是响应式的
• getter 可以对 state 进行计算操作（类似computed），主要用来过滤一些数据，可以在多组件之间复用
• mutations 定义的方法动态修改 state 中的数据，通过 commit 提交方法，方法必须是同步的
• actions 将 mutations 里面处理数据的方法变成异步的，就是异步操作数据，通 store.dispatch 来分发 actions，把异步的方法写在 actions 中，通过 commit 提交 mutations，进行修改数据。

应用流程

1. 安装
2. 配置
3. 使用

1 安装

有2种方式

1. 手脚架预设 选择

2. npm/yarn安装

vue:
npm install vuex@next --save
yarn:
yarn add vuex@next --save

2 配置

建store文件夹 --> 目录下新建index.js，在该文件内进行配置 --> 在main.js中引入

（若使用手脚架，不需要自行配置）

配置store有两种方式，

数据比较少，功能结构简单的可以直接在index.js里配置state、mutation…
数据比较多，结构复杂的可以在index.js里设置modules，

1 直接配置

index.js

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    
  },
  getters: {
    
  },
  //里面定义方法，操作state方法
  mutations: {
    
  },
  // 操作异步操作mutation
  actions: {
    
  },
  modules: {
    
  },
})  

2. modules模块化配置

index.js

import Vue from "vue";
import Vuex from "vuex";
import tab from "./tab"; //引入tab模块 tab.js里的内容写在modules里也可以

Vue.use(Vuex)

const store =  new Vuex.Store(
    {
        modules:{
            tab
        }
    
    }
)

export default store

tab.js

export default{
    state:{
        isCollapse:false      
    },
    mutations:{
        collapseMenu(state){
            state.isCollapse = !state.isCollapse
        },
}

在main.js里进行引入

import Vue from 'vue'
import App from './App.vue'

import store from './store/index' //将store对象导入


new Vue({
  store, //挂载
  render: h => h(App),
}).$mount('#app')

3 使用

1. state //传数据

提供唯一的公共数据源，所有共享的数据统一放到store的state进行储存，相似与data

在vuex中state中定义数据，可以在任何组件中进行调用，不需要再重新引入
有3种调用的方法：

方式1：在标签里直接使用

例子1：

export default new Vuex.Store({
  //数据，相当于data
  state: {
    name:"张三",
    age:12,
    count:0
  },
})

<span>{{ store.state.name }} </span>

方式2：this.store.state.全局数据名称

例子（modules)：

export default{
    state:{
        isCollapse:false      
    },
    mutations:{
        collapseMenu(state){
            state.isCollapse = !state.isCollapse
        },
}

    computed:{
        isCollapse(){
            return this.$store.state.tab.isCollapse //注意modules里的对象的获取方式
        }
    }

方式3：辅助函数mapState

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性
script中引入辅助函数：

import { mapState } from 'vuex'

  computed:{
    //通过辅助函数获取store中的state
    ...mapState(['userName'])
    //等价于：下面常规计算属性代码
/*    userName (){
      return this.$store.state.userName
    }*/
  }

html里调用：

<div>{{ userName }}</div>

2. mutation //更改数据

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

触发mutaition操作的方式有两种 -->commit和mapMutation

例子

state: {
    name: "张三",
    age: 12,
    count: 0
    },
getters:{}
//里面定义方法，操作state方发
mutations: {
    addcount(state,num){
    state.count += state.count + num
    }，
    reduce(state){
    state.count -= state.count - num
    }
   }

<bottom @="addBtn">增加</bottom>
<bottom @="reduceBtn">减少</bottom>

方式一：使用commit触发

methods:{
 //加法
 addBtn(){
 this.$store.commit("addcount", 10)     //每次加十
 }
 //减法
 reduceBtn(){
 this.$store.commit("reduce", 10)      //每次减十
 }
 }

方式二：使用mapMutation触发

methods:
...mapMutations(["addcount",  "reduce"]),
     addBtn() {
     this.addcount(10);
     }
     reduceBtn(){
     this.reduce(10);
     }

(其他状态和属性待补充和更新）