Vuex - state , getters , mutations , actions ， modules 的使用

 

1， 安装   vue add vuex

2， 安装完之后会自动生成store文件夹，并在main.js中自动引用

store/index.js

3，在store文件夹下的index.js中定义

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {  

    username:'霍比特人'

  },

  getters:{

   

  },

  mutations: {

   

  },

  actions: {

   

  },

  modules: {
 

  }

})

4，组件中获取state

console.log('store中的值 : '+this.$store.state.username);

<div>{{name}}</div>

注意要放在computed方法中，可以实时变化

computed: {

name(){

return this.$store.state.username

}

},

4.2,辅助函数mapState，能够帮助我们更便捷的获取state

computed: mapState(["username"]),

5,  Getters  获取并操作属性

5.1 getters   在原有状态下派生新的状态  

（1）/store/index.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

username:'哈哈',

count:0,

todos: [

{ id: 1, text: '...', done: true },

{ id: 2, text: '...', done: false }

]

},

getters:{

/* 原有基础上派生新的状态 */

username: state => {

return state.username+'..new'

},

count: state=>{

return ++state.count

}

},

mutations: {

},

actions: {

},

modules: {

}

})

（2）*.vue

computed: {

username(){

return this.$store.getters.username

}

},

5.2 getters   在原有状态下过滤派生新的状态

（1）

state: {

username:'哈哈',

count:0,

todos: [

{ id: 1, text: '...', completed: true },

{ id: 2, text: '...', completed: false },

{ id: 3, text: '...', completed: true },

{ id: 4, text: '...', completed: false },

{ id: 5, text: '...', completed: true },

]

},

getters:{

/* 原有基础上派生新的状态 */

username: state => {

return state.username+'..new'

},

count: state=>{

return ++state.count

},

completedTodos: state => {

return state.todos.filter(t=>t.completed)  //filter过滤,得到每一个todo,如果todo.completed为真得到，false则被过滤掉

//return state.todos.filter(t=>!t.completed)  过滤掉真的

}

},

（2）

completedTodos(){

return this.$store.getters.completedTodos

}

5.3 getters   返回某个新的状态的长度

getters:{

completedTodos: state => {

return state.todos.filter(t=>!t.completed)

},

/* 返回   completedTodos数据为假的个数*/

completedTodosCount:(state,getters)=>{

return getters.completedTodos.length

}

},

5.4 getters  通过id找到某个值

（1）

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

todos: [

      { id: 1, text: '...', completed: true },

      { id: 2, text: '...', completed: false },

      { id: 3, text: '...', completed: true },

      { id: 4, text: '...', completed: false },

      { id: 5, text: '...', completed: true },

    ]

},

getters:{

getTodosById: state => id =>{

return state.todos.find(t=>t.id===id)

}

},

mutations: {

},

actions: {

},

modules: {

}

})

（2）

   

{{getTodosById(1)}}

 

computed: {

getTodosById(){

return this.$store.getters.getTodosById

}

},

5.5  getters  简化 

<div class="f1">{{getTodosById(1)}}</div>

import { mapState,mapGetters } from 'vuex'

computed: mapGetters(["getTodosById"])，

6，Mutations  修改状态  ( Mutation必须是同步，如果用到异步要使用action)

（1）

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

count:0,

},

getters:{

},

mutations: {

incrementCount(state){

return state.count++

},

decrementCount(state,n){

// n为传递过来的参数 ，

//在大多数情况下，载荷（n）应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读

 

return state.count-=n

}

},

actions: {

},

modules: {

}

})

（2）

<div class="f1">

<button @click="increment">+</button>

{{count}}

<button @click="decrement(2)">-</button>

</div>

methods: {

increment(){

/* 触发mutation中的方法 */

this.$store.commit("incrementCount")

},

decrement(n){

this.$store.commit("decrementCount",n)

}

},

7，Actions 用来操作mutation，异步修改状态  （Action中主要做数据的请求）

Action 类似于 mutation，不同在于：

·       Action 提交的是 mutation，而不是直接变更状态。

·       Action 可以包含任意异步操作。

（1）操作count

actions: {

incrementCountAsync(context){  //context相当于 this.$store

setTimeout(()=>{

context.commit("incrementCount")  //提交到mutation

},2000)

},

decrementCountAsync({commit},payload){  // 结构出 commit  ;   payload接收参数

setTimeout(()=>{

commit("decrementCount",payload)

},1000)

}

},

  ————————————————————

<div class="f1">

<button @click="increment">+</button>

{{count}}

<button @click="decrement(2)">-</button>

</div>

 

methods: {

increment(){

this.$store.dispatch("incrementCountAsync")

},

decrement(n){

this.$store.dispatch("decrementCountAsync",n)

}

},

 

（2）获取和更新数据

import Vue from 'vue'

import Vuex from 'vuex'

import http from '../http'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

todos: [

{ id: 1, text: '...', completed: true },

{ id: 2, text: '...', completed: false },

{ id: 3, text: '...', completed: true },

{ id: 4, text: '...', completed: false },

{ id: 5, text: '...', completed: true },

]

},

getters:{

},

mutations: {

setTodos:(state,n)=>(state.todos=n)   //n为接收的参数 ， todos为state中的todos

},

actions: {

async fetchTodos({commit}){

const res = await http.get('/')

console.log(res);

/* 更新数据 */

commit("setTodos",res.data)

}

},

modules: {

}

})

————————————————————————

<div>{{todos}}</div>

<script>

import { mapState,mapGetters } from 'vuex'

export default {

methods: {

fetchTodos(){

this.$store.dispatch("fetchTodos")

}

},

computed: mapState(["username","count","todos"]),

created() {

this.fetchTodos()

},

}

</script>

 

8，Module 模块化 （将state中对象抽离, 每一个state包含自己的getters,mutations和actionss，从而实现模块化）

（1）（修改index,js内容）store/index.js

import Vue from 'vue'

import Vuex from 'vuex'

import todos from './modules/todos'

Vue.use(Vuex)

export default new Vuex.Store({

modules: {

todos

}

})

（2）（在store目录下创建modules目录，并在modules目录下创建todo,js） store/modules/todos.js

import http from '../../http'

const state = {

todos: [

{ id: 1, text: '...', completed: true },

{ id: 2, text: '...', completed: false },

{ id: 3, text: '...', completed: true },

{ id: 4, text: '...', completed: false },

{ id: 5, text: '...', completed: true },

]

}

const getters = {

completedTodos: state => {

return state.todos.filter(t=>!t.completed)  //filter过滤,得到每一个todo,如果todo.completed为真得到，false则被过滤

},

/* 返回   completedTodos数据为假的个数*/

completedTodosCount:(state,getters)=>{

return getters.completedTodos.length

}

}

const mutations = {

setTodos:(state,n)=>(state.todos=n)   //n为接收的参数 ， todos为state中的todos

}

const actions = {

async fetchTodos({commit}){

const res = await http.get('/')

console.log(res);

/* 更新数据 */

commit("setTodos",res.data)

}

}

export default {

    state,

    getters,

    mutations,

    actions

}