vue-7-3 Vuex基本用法01

 

1. 简介

项目简单不需要使用

大型项目好用

是要是为了解决多个组件要访问一样的数据的问题，进行集中的数据管理和状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说，用来集中管理数据，类似于React中的Redux，都是基于Flux的前端状态管理框架           

2. 基本用法

2.1 安装vuex

cnpm install vuex -S

2.2 在src目录下创建store.js文件，在main.js中导入并配置store.选项

      Vuex 通过 store 选项，提供了一种机制将状态从根组件“注入”到每一个子组件中（需调用 Vue.use(Vuex)）：

import Vue from 'vue'
import App from './App.vue'
import store from './store.js'     /*导入store对象*/

new Vue({
  /*配置store选项，指定为store对象，vue会自动将store对象注入到子组件中件*/
  /*在子组件中通过this.$store访问该store对象*/
  store,
  el: '#app',
  render: h => h(App)
})

2.3 编辑store.js文件

Vuex的核心是Store(仓库)，相当于是一个容器，一个store实例中包含以下属性的方法：
    state       定义属性（状态、数据）
    getters     用来获取属性
    actions     定义方法（动作）
    commit      提交变化，修改数据的唯一方式就是显式的提交mutations
    mutations   定义变化
    注：不能直接修改数据，必须显式提交变化，目的是为了追踪到状态的变化 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
//定义属性（数据）
var state={
  count:6
}
//创建store对象
const store =new Vuex.Store({
  state
});
//导出store对象,必须先创建
export default store;

2.4 编辑App.vue

在子组件中访问store对象的两种方式：
    方式1：通过this.$store访问
    方式2：通过mapState、mapGetters、mapActions访问，vuex提供了两个方法：
        mapState    获取state
        mapGetters  获取getters
        mapActions  获取actions

第一种方式

计算属性，这样可以直接用{{count}}进行访问

computed:{
    count(){
       return this.$store.state.count;
    }
  }

第二种方式：使用辅助函数

在App.vue里面的script里面引入{mapGetters}

import {mapGetters} from 'vuex'

computed:mapGetters([
  'count'
])

在main.js里面也必须导入，store.js,并且在vue实例里面注册过

修改store.js文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
//定义属性（数据）
var state={
  count:6
}
//定义getters
var getters={
  count(state){
    return state.count;
  }
}
//创建store对象
const store =new Vuex.Store({
  state,
  getters
});
//导出store对象,必须先创建
export default store;

这样就可以在模板中访问{{count}}

调用方法改变count的值

①首先在App.vue组件按钮上添加@click方法；

②在store.js编辑主要的actions和mutations,然后导出

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
//定义属性（数据）
var state={
  count:6
}
//定义getters
var getters={
  count(state){
    return state.count;
  }
}
//定义actions,要执行的操作，如流程判断、异步请求等
const actions={ //包含：commit,dispatch、state
  // increment(context){
  //   // console.log(context);
  //   // context.commit()   //commit本身是函数
  // }

  //可以利用es6对象的解构,重写上面的函数
  //commit提交突变，修改数据的唯一方式
  increment({commit,state}){
    commit('increment');//提交一个名为increment的变化，名称可以自定义
  },
  decrement({commit,state}){
    if(state.count>10){
    commit('decrement');}
  }

}
//定义mutations,处理状态（数据）的改变
const mutations={
  increment(state){
    state.count++;
  },
  decrement(state){
    state.count--;
  }
}
//创建store对象
const store =new Vuex.Store({
  state,
  getters,
  actions,
  mutations
});
//导出store对象,必须先创建
export default store;

③在App.vue的scripts中导入mapActions，用来获取store.js里面的actions

 import {mapGetters,mapActions} from 'vuex'

methods:mapActions([
    'increment',
    'decrement'
  ])

 

补充：    利用this.$store.state.count可以获得count值

               利用mapGetter可以获得count值，获得的是getter里面的

               利用mapState可以获得state里面的count值

import {mapState,mapGetters,mapActions} from 'vuex'
 computed:mapState([
    'count'
  ])

判断count是奇数还是偶数

利用getter,

isEvenOrOdd(state){
    return state.count%2==0 ? '偶数':'奇数';
  }

computed:mapGetters([
    'count',
    'isEvenOrOdd'
  ]),

|-src
    |-store
        |-index.js
        |-getters.js
        |-actions.js
        |-mutations.js
        |-modules  //分为多个模块，每个模块都可以拥有自己的state、getters、actions、mutations
            |-user.js
            |-cart.js
            |-goods.js
            |....

3. 分模块组织Vuex

①首先建立项目webpack-simple

②手动建立如下store,即vuex目录

modules下面的对应各个模块，比如用户、购物车等

index作用的统一导入，然后new一个store对象导出，导入的时候注意modules下的模块怎么导出

其他的就是根级别的getters,actions,mutations等

③在mai.js里面导入并注册

import Vue from 'vue'
import App from './App.vue'
import store from './store/index.js'


new Vue({
  store,
  el: '#app',
  render: h => h(App)
})

④编辑子模块usr.js

里面导入常量文件types.js，定义state,getters,actions,mutations,并把这些变量导出

/*
*用户模块
* */
/*导入的是对象*/
import types from '../types.js'

const state={
  count:6
}
//定义getters
var getters={
  count(state){
    return state.count;
  }

}

//定义actions,要执行的操作，如流程判断、异步请求等
const actions={ //包含：commit,dispatch、state
  // increment(context){
  //   // console.log(context);
  //   // context.commit()   //commit本身是函数
  // }

  //可以利用es6对象的解构,重写上面的函数
  //commit提交突变，修改数据的唯一方式
  increment({commit,state}){
    commit(types.INCREMENT);//提交一个名为increment的变化，名称可以自定义
  },
  decrement({commit,state}){
    if(state.count>10)
      commit(types.DECREMENT);
  }
}

//定义mutations,处理状态（数据）的改变
//es6通过中括号，字符串可以变为变量
const mutations={
  [types.INCREMENT](state){
    state.count++;
  },
  [types.DECREMENT](state){
    state.count--;
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

types定义常量

/*
*
* 定义类型常量*/
const INCREMENT='INCREMENT'
const DECREMENT='DECREMENT'
export default{
  INCREMENT,
  DECREMENT
}

⑤getters编辑

获取count的值的时候注意：count的值在user里面，user存储在state里面，state相当于全局，所以可以通过以下的方式获取count

const getters={
  isEvenOrOdd(state){
    //状态数据里面有user模块
    return state.user.count%2==0 ? '偶数':'奇数';
  }
}

export default getters;

⑥acrions编辑

import types from './types.js'
const actions={
  incrementAsync({commit,state}){
    //异步的操作
    var p=new Promise((resolve,reject)=>{
      setTimeout(()=>{
        resolve();
      },3000)
    });
    p.then(()=>{
      commit(types.INCREMENT);
    }).catch(()=>{
      console.log("异步操作")
    })
  }
}


export default actions;

⑦index.js编辑

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

import getters from './getter.js'
import actions from './actions.js'
import user from './modules/user.js'
//不要把new丢了，要创建一个新的对象
export default new Vuex.Store({
  getters,
  actions,
  modules:{
    user
  }
})

注意如何导出modules下的user

⑧App.vue组件

<template>
  <div id="app">
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
    <button @click="incrementAsync">增加（有权限）</button>
    <p>当前数字为：{{count}}</p>
    <p>{{isEvenOrOdd}}</p>
  </div>
</template>

<script>
  import {mapState,mapGetters,mapActions} from 'vuex'

export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  // computed:{
  //   count(){
  //      return this.$store.state.count;
  //   }
  // }
  //数组里面指定要获取的属性
  computed:mapGetters([
    'count',
    'isEvenOrOdd'
  ]),
  // computed:mapState([
  //   'count'
  // ]),
  methods:mapActions([
    'increment',
    'decrement',
    'incrementAsync'
  ])
}
</script>

<style>

</style>

DONE.