9vuex_store v1.0.0
1.回顾子父级数据传递
2.Vuex:多个组件共享数据
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
2.1 什么情况下使用vuex:
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,
您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,
您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
引用 Redux 的作者 Dan Abramov 的话说就是:
Flux 架构就像眼镜:您自会知道什么时候需要它
2.2 vuex状态管理
view ----> (dispatch)Action -->(Commit)Mutations -->(Mutate)State --> View
注意: Action不是必需品,如果有异步操作才可能用到Action,否则可以不使用
3.安装
cnpm install vuex --save
4.使用
4.1 引入main.js
import Vuex from 'vuex'
Vue.use(Vuex)
4.2 创建一个store仓库:
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
4.3 将store注入到vue实例当中
/ eslint-disable no-new /
new Vue({
el: '#app',
router,
store,
components: { App },
template: ''
})
4.4 在组件中获取状态,如:
computed:{
getCount()
{
return this.$store.state.count;
}
},
4.5 变更状态:main.js
mutations: {
increment (state) {
// 变更状态
state.count++
}
4.6在组件中调用执行
methods:{
add(){
this.$store.commit("increment")
}
}
4.7 当加入actions,就不再直接外部调用mutations了:
Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作
mutations: {
increment(state) {
state.count++;
},
decrease(state) {
state.count --;
}
},
actions: {
increment(context) {
context.commit("increment");
},
decrease(context) {
context.commit("decrease");
}
组件调用时由this.$store.commit("increment") ===> this.$store.dispatch("increment")
4.8 取数据时一般不直接使用state,而是加入解决方案使用getters
getters:{
getState(state){
return state.count > 0 ? state.count : 0
}
}
此时,组件读取数值时由:
this.$store.state.count ==> this.$store.getters.getState
4.9 新建store/index.js
将vuex提取到index.js中
5. 使用npm管理组件版本
5.1 npm发布一个包
5.1.1 官网注册账号
5.1.2 cmd 下登录账号:npm login
5.1.3 发布:npm plublish
5.2 创建自己的组件
5.2.1 初始化项目
5.2.2 修改package.json 文件
"private":false
"main": "dist/vue-router.min.js"
5.2.3 修改webpack.prod.config.js 文件
5.2.3.1 修改out输出目录
output: {
path: config.build.assetsRoot,
publicPath: config.build.assetsPublicPath,
filename: 'vue-wgw-counter.min.js',
library:'VueWgWCounter',
libraryTarget: 'umd',
},
5.2.3.2 删除无用内容
if (config.build.productionGzip) {
const CompressionWebpackPlugin = require('compression-webpack-plugin')
webpackConfig.plugins.push(
new CompressionWebpackPlugin({
asset: '[path].gz[query]',
algorithm: 'gzip',
test: new RegExp(
'\\.(' +
config.build.productionGzipExtensions.join('|') +
')$'
),
threshold: 10240,
minRatio: 0.8
})
)
}
// generate dist index.html with correct asset hash for caching.
// you can customize output by editing /index.html
// see https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: config.build.index,
template: 'index.html',
inject: true,
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
// more options:
// https://github.com/kangax/html-minifier#options-quick-reference
},
// necessary to consistently work with multiple chunks via CommonsChunkPlugin
chunksSortMode: 'dependency'
})
new webpack.HashedModuleIdsPlugin(),
// enable scope hoisting
new webpack.optimize.ModuleConcatenationPlugin(),
// split vendor js into its own file
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
// any required modules inside node_modules are extracted to vendor
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
// extract webpack runtime and module manifest to its own file in order to
// prevent vendor hash from being updated whenever app bundle is updated
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
// This instance extracts shared chunks from code splitted chunks and bundles them
// in a separate chunk, similar to the vendor chunk
// see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
// copy custom static assets
new CopyWebpackPlugin([
{
from: path.resolve(__dirname, '../static'),
to: config.build.assetsSubDirectory,
ignore: ['.*']
}
])
5.2.3.3 修改:K:\9vuex_store\config\index.js
assetsSubDirectory: 'static' ===> assetsSubDirectory: '/',
5.3 修改输出
5.3.1 修改main.js文件,输出自己的组件即可使用
//VueWgWCounter来自于webpack.prod.conf.js中的配置library:'VueWgWCounter',
import VueWgWCounter from './components/outter'
export default VueWgWCounter
5.4 切换到工程目录打包
npm run build
5.5 删除:K:\9vuex_store\.gitignore 中的 /dist/
5.6 发布:npm publish
5 years ago