vue-cli中vuex的方法的详细使用

一:vuex中的属性有那些

1:首先是vuex中的state,是vuex中存放数据的地方,类似data.
2:getters属性就像计算属性(computed)一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
3:Mutation属性则是类似methods,可以通过提交mutation来改变state中的数据或者状态,写同步的方法
4:Actions则是和Mutation类似,也是提交方法,不同的是它可以提交mutation里面的方法,并且支持异步方法
5: Module则是可以当你的vuex文件需求增多时,可以通过引入模块(Module)来解决这一问题,每个模块都有自己的state,getters,mutation,action等,甚至模块里面还能嵌套模块.

二:如何在你的项目中使用vuex

首先在你的项目中可以npm i vuex 安装一下(首先得安装node)
然后在你的项目中建一个vuex的文件夹,在文件夹里建一个store.js文件

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        count: 0,
        age: 10,

    },
    getters: {
        get(state) {
            return state.age
        }

    },
    mutations: {
        add(state, obj) {
            return state.count += obj.num
        },
        add1(state, obj) {
            return state.age += obj.num
        }
    },
    actions: {
    add (context) {
      context.commit('add')
    }
})

文件夹内state就是声明的全局数据,getters其实就相当于vue中的计算属性(computed)

import store from "../vuex/store"

在哪使用就在那引入vuex中的文件夹

data() {
    return {
     a:store.state.count,
     age:store.state.age,

     d:store.getters.get,
    
    };
  },
  computed: {
  
    todos:function() {  //通过方法访问
            return store.getters.doneTodos;
        },
        doneTodosCount () {
		    return store.getters.doneTodosCount
		},

    count () {
      return store.state.count
    },
    get(){
      return store.getters.get
    }
  },

在页面使用

    {{ count }}||{{ age }}|| {{ d }}|| {{ a }}

有区别的是,调用getters方法改变的数据不会实时更新到视图上,如果想要实时更新可以用watch属性进行监听

modules使用

modules: {
    user,
    log,
  },

新建一个getters文件用来接收组件里面的state

const getters = {
    log: state => state.log.logs,
    users: state => state.user.users
}
export default getters;

log和user文件如下

//log.js
const log = {
    state: {
        logs: "log123"
    }
}

export default log
//user.js
const user = {
    state: {
        users: "user123"
    }
}

export default user

页面调用

 user: store.getters.users,
 log: store.getters.log,

{{ user }}||{{ log }}

页面显示效果

第一次写自己的博客,如果有不对的地方希望大家指点,另外如果对大家有帮助的话,希望大家可以点一下免费的赞,小弟在这里感激不尽.