vuex导入_Vuex的引入及其仓库store的配置

以下是Vuex全局状态管理，数据共享具体操作：

官网：https://vuex.vuejs.org/zh/installation.html

Vuex全局状态管理，数据共享:

1，可以查看vuex官网：https://vuex.vuejs.org/zh/installation.html

2，引入vuex有两种方式：

a,直接下载保存vuex.js

b,(如果使用cnpm，所以下面也要使用cnpm)在项目名称下一级安装vuex：

安装： cnpm install vuex --save

卸载： cnpm uninstall vuex

3，所有插件的使用都是在src/main.js中进行导入的。包括：插件vue.js,vuex.js,App,router等。

打开src/main.js 导入如： import store from './store'，并且需要在main.js中的

new Vue实例中添加：store。如下：

new Vue({

el: '#app',

router,

store,//引用vuex仓库：store

components: { App },

template: ''

})

4，在src目录下创建stroe文件夹，以及在store里面创建index.js文件：

src/store/index.js文件中进行配置，如下：

import Vue from 'vue' //调用 vue 这里可以分号，也可以不添加分号

import Vuex from 'vuex'; //调用 vuex 插件 这里可以分号，也可以不添加分号

Vue.use(Vuex) //全局调用Vuex，这里千万不能添加分号

export default new Vuex.Store({ //实例化vuex仓库

/*store运行机制：

通过actions触发mutations(类似事件)，进而修改具体仓库状态state(store.state.count)

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。*/

state:{//共享数据池，声明公共数据，即状态

count:0,

num:1,

},

mutations:{//用于处理公共数据

increment(state,num){

state.count++;

state.num = num;

}

},

actions:{//把数据处理委托给mutations对象的increment方法

inc({commit},obj){ //唯一方法：使用 store.commit 方法触发状态变更

commit('increment',obj);

}

}

})

5，在需要调用共享数据的页面进行数据调用和修改：

获取共享数据：this.$store.state.count;

修改共享数据：this.$store.dispatch('inc',形参/实参);

/*store运行机制：actions --> mutations --> state 所以在修改共享数据时，

是直接调用actions中的指定函数，所以这里的'inc'函数明一定要存在。*/

{{count}}

=========================================

export default{

data(){

return{

count:0,

love:'I Love You Forever!',

}

},

methods:{

setNum(){

this.$store.dispatch('inc',this.love);//修改共享数据num

//状态修改一定是在mutations中，一定不能在调用的页面之中

// this.$store.state.count++;

},

getNum(){

console.log(this.$store.state.num);

},getCount(){

console.log(this.$store.state.count);

},

setLove(){

this.$store.dispatch('str','I want to fuck you fuck you!');

//状态修改一定是在mutations中，一定不能在调用的页面之中

// this.$store.state.a++;

},

getLove(){

console.log(this.$store.state.love);

},

getA(){

console.log(this.$store.state.a);

}

}

}

// 以下是src/store/index.js页面的配置

import Vue from 'vue' //调用 vue 这里可以分号，也可以不添加分号

import Vuex from 'vuex'; //调用 vuex 插件 这里可以分号，也可以不添加分号

Vue.use(Vuex) //全局调用Vuex，这里千万不能添加分号

export default new Vuex.Store({ //实例化vuex仓库

/*store运行机制：

通过store.commit方法---触发---》store.state状态变更---》

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。*/

state:{//共享数据池，声明公共数据，即仓库状态

count:0,

num:1,

a:0,

love:'i love you',

},

mutations:{//用于处理公共数据，mutation 英 /mjuːˈteɪʃn/ 突变

increment(state,num){

state.count++;//状态修改一定是在mutations中，一定不能在调用的页面之中

state.num = num;

},

strings(state,str){

this.state.love=str;

this.state.a++;//状态修改一定是在mutations中，一定不能在调用的页面之中

}

},

actions:{//把数据处理委托给mutations对象的increment方法

inc({commit},obj){

commit('increment',obj);

},

str({commit},str){

commit('strings',str)

}

}

})