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: 1text: '...'completed: true },

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

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

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

      { id: 5text: '...'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

}